// Creating a trim method
if(!String.trim)String.prototype.trim = function() { return this.replace(/^\s+|\s+$/, ''); };
var DHTMLSuite_funcs = new Object();
if(!window.DHTML_SUITE_THEME)var DHTML_SUITE_THEME = 'blue';
if(!window.DHTML_SUITE_THEME_FOLDER)var DHTML_SUITE_THEME_FOLDER = 'js/themes/';
if(!window.DHTML_SUITE_JS_FOLDER)var DHTML_SUITE_JS_FOLDER = 'js/separateFiles/';



var DHTMLSuite = new Object();

var standardObjectsCreated = false;	// The classes below will check this variable, if it is false, default help objects will be created
DHTMLSuite.eventEls = new Array();	// Array of elements that has been assigned to an event handler.

var widgetDep = new Object();
// Widget dependencies
widgetDep['formValidator'] = ['dhtmlSuite-formUtil.js'];	// Form validator widget
widgetDep['paneSplitter'] = ['dhtmlSuite-paneSplitter.js','dhtmlSuite-paneSplitterModel.js','dhtmlSuite-dynamicContent.js','ajax.js'];
widgetDep['menuBar'] = ['dhtmlSuite-menuBar.js','dhtmlSuite-menuItem.js','dhtmlSuite-menuModel.js'];
widgetDep['windowWidget'] = ['dhtmlSuite-windowWidget.js','dhtmlSuite-resize.js','dhtmlSuite-dragDropSimple.js','ajax.js','dhtmlSuite-dynamicContent.js'];
widgetDep['colorWidget'] = ['dhtmlSuite-colorWidgets.js','dhtmlSuite-colorUtil.js'];
widgetDep['colorSlider'] = ['dhtmlSuite-colorWidgets.js','dhtmlSuite-colorUtil.js','dhtmlSuite-slider.js'];
widgetDep['colorPalette'] = ['dhtmlSuite-colorWidgets.js','dhtmlSuite-colorUtil.js'];
widgetDep['calendar'] = ['dhtmlSuite-calendar.js','dhtmlSuite-dragDropSimple.js'];
widgetDep['dragDropTree'] = ['dhtmlSuite-dragDropTree.js'];
widgetDep['slider'] = ['dhtmlSuite-slider.js'];
widgetDep['dragDrop'] = ['dhtmlSuite-dragDrop.js'];
widgetDep['imageEnlarger'] = ['dhtmlSuite-imageEnlarger.js','dhtmlSuite-dragDropSimple.js'];
widgetDep['imageSelection'] = ['dhtmlSuite-imageSelection.js'];
widgetDep['floatingGallery'] = ['dhtmlSuite-floatingGallery.js','dhtmlSuite-mediaModel.js'];
widgetDep['contextMenu'] = ['dhtmlSuite-contextMenu.js','dhtmlSuite-menuBar.js','dhtmlSuite-menuItem.js','dhtmlSuite-menuModel.js'];
widgetDep['dynamicContent'] = ['dhtmlSuite-dynamicContent.js','ajax.js'];
widgetDep['textEdit'] = ['dhtmlSuite-textEdit.js','dhtmlSuite-textEditModel.js','dhtmlSuite-listModel.js'];
widgetDep['listModel'] = ['dhtmlSuite-listModel.js'];
widgetDep['resize'] = ['dhtmlSuite-resize.js'];
widgetDep['dragDropSimple'] = ['dhtmlSuite-dragDropSimple.js'];
widgetDep['dynamicTooltip'] = ['dhtmlSuite-dynamicTooltip.js','dhtmlSuite-dynamicContent.js','ajax.js'];
widgetDep['modalMessage'] = ['dhtmlSuite-modalMessage.js','dhtmlSuite-dynamicContent.js','ajax.js'];
widgetDep['tableWidget'] = ['dhtmlSuite-tableWidget.js','ajax.js'];
widgetDep['progressBar'] = ['dhtmlSuite-progressBar.js'];
widgetDep['tabView'] = ['dhtmlSuite-tabView.js','dhtmlSuite-dynamicContent.js','ajax.js'];
widgetDep['infoPanel'] = ['dhtmlSuite-infoPanel.js','dhtmlSuite-dynamicContent.js','ajax.js'];
widgetDep['form'] = ['dhtmlSuite-formUtil.js','dhtmlSuite-dynamicContent.js','ajax.js'];

var depCache = new Object();

DHTMLSuite.include = function(widget)
{
	if(!widgetDep[widget]){
		alert('Cannot find the files for widget ' + widget + '. Please verify that the name is correct');
		return;
	}
	var files = widgetDep[widget];
	for(var no=0;no<files.length;no++){
		if(!depCache[files[no]]){
		    document.write('<' + 'script');
		    document.write(' language="javascript"');
		    document.write(' type="text/javascript"');
		    document.write(' src="' + DHTML_SUITE_JS_FOLDER + files[no] + '">');
		    document.write('</' + 'script' + '>');
		    depCache[files[no]] = true;
		}
	}
}

DHTMLSuite.discardElement = function(element) { 
	element = DHTMLSuite.commonObj.getEl(element);
    var gBin = document.getElementById('IELeakGBin'); 
    if (!gBin) { 
        gBin = document.createElement('DIV'); 
        gBin.id = 'IELeakGBin'; 
        gBin.style.display = 'none'; 
        document.body.appendChild(gBin); 
    } 
    // move the element to the garbage bin 
    gBin.appendChild(element); 
    gBin.innerHTML = ''; 
} 


DHTMLSuite.createStandardObjects = function()
{
	DHTMLSuite.clientInfoObj = new DHTMLSuite.clientInfo();	// Create browser info object
	DHTMLSuite.clientInfoObj.init();	
	if(!DHTMLSuite.configObj){	// If this object isn't allready created, create it.
		DHTMLSuite.configObj = new DHTMLSuite.config();	// Create configuration object.
		DHTMLSuite.configObj.init();
	}
	DHTMLSuite.commonObj = new DHTMLSuite.common();	// Create configuration object.
	DHTMLSuite.variableStorage = new DHTMLSuite.globalVariableStorage();;	// Create configuration object.
	DHTMLSuite.commonObj.init();
	DHTMLSuite.domQueryObj = new DHTMLSuite.domQuery();

	
	DHTMLSuite.commonObj.addEvent(window,'unload',function(){ DHTMLSuite.commonObj.__clearMemoryGarbage(); });
	
	standardObjectsCreated = true;	
}

    


/************************************************************************************************************
*	Configuration class used by most of the scripts
*
*	Created:			August, 19th, 2006
* 	Update log:
*
************************************************************************************************************/


/**
* @constructor
* @class Store global variables/configurations used by the classes below. Example: If you want to  
*		 change the path to the images used by the scripts, change it here. An object of this   
*		 class will always be available to the other classes. The name of this object is 
*		"DHTMLSuite.configObj".	<br><br>
*			
*		If you want to create an object of this class manually, remember to name it "DHTMLSuite.configObj"
*		This object should then be created before any other objects. This is nescessary if you want
*		the other objects to use the values you have put into the object. <br>
* @version				1.0
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
**/
DHTMLSuite.config = function()
{
	var imagePath;	// Path to images used by the classes. 
	var cssPath;	// Path to CSS files used by the DHTML suite.	

	var defaultCssPath;
	var defaultImagePath;
}


DHTMLSuite.config.prototype = {
	// {{{ init()
	/**
	 * 	Initializes the config object - the config class is used to store global properties used by almost all widgets
	 *
	 * @public
	 */
	init : function()
	{
		this.imagePath = DHTML_SUITE_THEME_FOLDER + DHTML_SUITE_THEME + '/images/';	// Path to images		
		this.cssPath = DHTML_SUITE_THEME_FOLDER + DHTML_SUITE_THEME + '/css/';	// Path to images	
		
		this.defaultCssPath = this.cssPath;
		this.defaultImagePath = this.imagePath;
			
	}	
	// }}}
	,
	// {{{ setCssPath()
    /**
     * This method will save a new CSS path, i.e. where the css files of the dhtml suite are located(the folder).
     *	This method is rarely used. Default value is the variable DHTML_SUITE_THEME_FOLDER + DHTML_SUITE_THEME + '/css',
     *	which means that the css path is set dynamically based on which theme you choose.
     *
     * @param string newCssPath = New path to css files(folder - remember to have a slash(/) at the end)
     * @public
     */
    	
	setCssPath : function(newCssPath)
	{
		this.cssPath = newCssPath;
	}
	// }}}
	,
	// {{{ resetCssPath()
    /**
     * @deprecated
     * Resets css path back to default value which is ../css_dhtmlsuite/
     * This method is deprecated.
     *
     * @public
     */    	
	resetCssPath : function()
	{
		this.cssPath = this.defaultCssPath;
	}
	// }}}
	,
	// {{{ resetImagePath()
    /**
     * @deprecated
     *
     * Resets css path back to default path which is DHTML_SUITE_THEME_FOLDER + DHTML_SUITE_THEME + '/css'
     * This method is deprecated. 
     * @public
     */    	
	resetImagePath : function()
	{
		this.imagePath = this.defaultImagePath;
	}
	// }}}
	,
	// {{{ setImagePath()
    /**
     * This method will save a new image file path, i.e. where the image files used by the dhtml suite ar located
     *
     * @param string newImagePath = New path to image files (remember to have a slash(/) at the end)
     * @public
     */
	setImagePath : function(newImagePath)
	{
		this.imagePath = newImagePath;
	}
	// }}}
}



DHTMLSuite.globalVariableStorage = function()
{
	var menuBar_highlightedItems;	// Array of highlighted menu bar items
	this.menuBar_highlightedItems = new Array();
	
	var arrayDSObjects;	// Array of objects of class menuItem.
	var arrayOfDhtmlSuiteObjects;
	this.arrayDSObjects = new Array();
	this.arrayOfDhtmlSuiteObjects = this.arrayDSObjects;
	var ajaxObjects;
	this.ajaxObjects = new Array();
}

DHTMLSuite.globalVariableStorage.prototype = {
	
}


/************************************************************************************************************
*	A class with general methods used by most of the scripts
*
*	Created:			August, 19th, 2006
*	Purpose of class:	A class containing common method used by one or more of the gui classes below, 
* 						example: loadCSS. 
*						An object("DHTMLSuite.commonObj") of this  class will always be available to the other classes. 
* 	Update log:
*
************************************************************************************************************/


/**
* @constructor
* @class A class containing common method used by one or more of the gui classes below, example: loadCSS. An object("DHTMLSuite.commonObj") of this  class will always be available to the other classes. 
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
**/

DHTMLSuite.common = function()
{
	var loadedCSSFiles;	// Array of loaded CSS files. Prevent same CSS file from being loaded twice.
	var cssCacheStatus;	// Css cache status
	var eventEls;
	var isOkToSelect;	// Boolean variable indicating if it's ok to make text selections
	
	this.okToSelect = true;
	this.cssCacheStatus = true;	// Caching of css files = on(Default)
	this.eventEls = new Array();	
}

DHTMLSuite.common.prototype = {
	
	// {{{ init()
    /**
     * This method initializes the DHTMLSuite_common object.
     *	This class contains a lot of useful methods used by most widgets.
     *
     * @public
     */    	
	init : function()
	{
		this.loadedCSSFiles = new Array();
	}	
	// }}}
	,
	// {{{ loadCSS()
    /**
     * This method loads a CSS file(Cascading Style Sheet) dynamically - i.e. an alternative to <link> tag in the document.
     *
     * @param string cssFile = Name of css file. It will be loaded from the path specified in the DHTMLSuite.common object
     * @param Boolean prefixConfigPath = Use config path as prefix.
     * @public
     */	
	loadCSS : function(cssFile,prefixConfigPath)
	{
		if(!prefixConfigPath && prefixConfigPath!==false)prefixConfigPath=true;
		if(!this.loadedCSSFiles[cssFile]){
			this.loadedCSSFiles[cssFile] = true;
			var lt = document.createElement('LINK');
			if(!this.cssCacheStatus){
				if(cssFile.indexOf('?')>=0)cssFile = cssFile + '&'; else cssFile = cssFile + '?';
				cssFile = cssFile + 'rand='+ Math.random();	// To prevent caching
			}
			if(prefixConfigPath){
				lt.href = DHTMLSuite.configObj.cssPath + cssFile;
			}else{
				lt.href = cssFile;
			}
			lt.rel = 'stylesheet';
			lt.media = 'screen';
			lt.type = 'text/css';
			document.getElementsByTagName('HEAD')[0].appendChild(lt);				
		}
	}		
	// }}}
	,
	// {{{ __setTextSelOk()
    /**
     * Is it ok to make text selections ?
     *
     * @param Boolean okToSelect 
     * @private
     */		
	__setTextSelOk : function(okToSelect){
		this.okToSelect = okToSelect;
	}
	// }}}
	,
	// {{{ __setTextSelOk()
    /**
     * Returns true if it's ok to make text selections, false otherwise.
     *
     * @return Boolean okToSelect 
     * @private
     */		
	__isTextSelOk : function()
	{
		return this.okToSelect;
	}
	// }}}	
	,	
	// {{{ setCssCacheStatus()
    /**
     * Specify if css files should be cached or not. 
     *
     *	@param Boolean cssCacheStatus = true = cache on, false = cache off
     *
     * @public
     */	
	setCssCacheStatus : function(cssCacheStatus)
	{		
	  this.cssCacheStatus = cssCacheStatus;
	}
	// }}}	
	,
	// {{{ getEl()
    /**
     * Return a reference to an object
     *
     * @param Object elRef = Id, name or direct reference to element
     * @return Object HTMLElement - direct reference to element
     * @public
     */		
	getEl : function(elRef)
	{
		if(typeof elRef=='string'){
			if(document.getElementById(elRef))return document.getElementById(elRef);
			if(document.forms[elRef])return document.forms[elRef];
			if(document[elRef])return document[elRef];
			if(window[elRef])return window[elRef];
		}
		return elRef;	// Return original ref.
		
	}
	// }}}
	,
	// {{{ isArray()
    /**
     * Return true if element is an array
     *
     * @param Object el = Reference to HTML element
     * @public
     */		
	isArray : function(el)
	{
		if(el.constructor.toString().indexOf("Array") != -1)return true;
		return false;
	}
	// }}}
	,
	// {{{ getStyle()
    /**
     * Return specific style attribute for an element
     *
     * @param Object el = Reference to HTML element
     * @param String property = Css property
     * @public
     */		
	getStyle : function(el,property)
	{		
		el = this.getEl(el);
	    if (document.defaultView && document.defaultView.getComputedStyle) {
            var retVal = null;	            
            var comp = document.defaultView.getComputedStyle(el, '');
            if (comp){
                retVal = comp[property];
            }	            
            return el.style[property] || retVal;
	    }
		if (document.documentElement.currentStyle && DHTMLSuite.clientInfoObj.isMSIE){	
	        var retVal = null;
	        if(el.currentStyle)value = el.currentStyle[property];
	        return (el.style[property] || retVal);                    		
		}
		return el.style[property];				
	}
	// }}}
	,
	// {{{ getLeftPos()
    /**
     * This method will return the left coordinate(pixel) of an HTML element
     *
     * @param Object el = Reference to HTML element
     * @public
     */	
	getLeftPos : function(el)
	{	 
		/*
		if(el.getBoundingClientRect){ // IE
			var box = el.getBoundingClientRect();	
			return (box.left/1 + Math.max(document.body.scrollLeft,document.documentElement.scrollLeft));
		}
		*/
		if(document.getBoxObjectFor){
			if(el.tagName!='INPUT' && el.tagName!='SELECT' && el.tagName!='TEXTAREA')return document.getBoxObjectFor(el).x
		}		 
		var returnValue = el.offsetLeft;
		while((el = el.offsetParent) != null){
			if(el.tagName!='HTML'){
				returnValue += el.offsetLeft;
				if(document.all)returnValue+=el.clientLeft;
			}
		}
		return returnValue;
	}
	// }}}
	,
	// {{{ getTopPos()
    /**
     * This method will return the top coordinate(pixel) of an HTML element/tag
     *
     * @param Object el = Reference to HTML element
     * @public
     */	
	getTopPos : function(el)
	{	
		/*
		if(el.getBoundingClientRect){	// IE
			var box = el.getBoundingClientRect();	
			return (box.top/1 + Math.max(document.body.scrollTop,document.documentElement.scrollTop));
		}
		*/	
		if(document.getBoxObjectFor){
			if(el.tagName!='INPUT' && el.tagName!='SELECT' && el.tagName!='TEXTAREA')return document.getBoxObjectFor(el).y
		}
		
		var returnValue = el.offsetTop;
		while((el = el.offsetParent) != null){
			if(el.tagName!='HTML'){
				returnValue += (el.offsetTop - el.scrollTop);
				if(document.all)returnValue+=el.clientTop;
			}
		} 
		return returnValue;
	}
	// }}}
	,	
	// {{{ getCookie()
    /**
     *
     * 	These cookie functions are downloaded from 
	 * 	http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm
	 *
     *  This function returns the value of a cookie
     *
     * @param String name = Name of cookie
     * @param Object inputObj = Reference to HTML element
     * @public
     */	
	getCookie : function(name) { 
	   var start = document.cookie.indexOf(name+"="); 
	   var len = start+name.length+1; 
	   if ((!start) && (name != document.cookie.substring(0,name.length))) return null; 
	   if (start == -1) return null; 
	   var end = document.cookie.indexOf(";",len); 
	   if (end == -1) end = document.cookie.length; 
	   return unescape(document.cookie.substring(len,end)); 
	} 	
	// }}}
	,	
	// {{{ setCookie()
    /**
     *
     * 	These cookie functions are downloaded from 
	 * 	http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm
	 *
     *  This function creates a cookie. (This method has been slighhtly modified)
     *
     * @param String name = Name of cookie
     * @param String value = Value of cookie
     * @param Int expires = Timestamp - days
     * @param String path = Path for cookie (Usually left empty)
     * @param String domain = Cookie domain
     * @param Boolean secure = Secure cookie(SSL)
     * 
     * @public
     */	
	setCookie : function(name,value,expires,path,domain,secure) { 
		expires = expires * 60*60*24*1000;
		var today = new Date();
		var expires_date = new Date( today.getTime() + (expires) );
	    var cookieString = name + "=" +escape(value) + 
	       ( (expires) ? ";expires=" + expires_date.toGMTString() : "") + 
	       ( (path) ? ";path=" + path : "") + 
	       ( (domain) ? ";domain=" + domain : "") + 
	       ( (secure) ? ";secure" : ""); 
	    document.cookie = cookieString; 
	}
	// }}}
	,
	// {{{ deleteCookie()
    /**
	 *
     *  This function deletes a cookie. (This method has been slighhtly modified)
     *
     * @param String name = Name of cookie
     * @param String path = Path for cookie (Usually left empty)
     * @param String domain = Cookie domain
     * 
     * @public
     */	
	deleteCookie : function( name, path, domain ) 
	{
		if ( this.getCookie( name ) ) document.cookie = name + "=" +
		( ( path ) ? ";path=" + path : "") +
		( ( domain ) ? ";domain=" + domain : "" ) +
		";expires=Thu, 01-Jan-1970 00:00:01 GMT";
	}
	// }}}
	,
	// {{{ cancelEvent()
    /**
     *
     *  This function only returns false. It is used to cancel selections and drag
     *
     * 
     * @public
     */	
    	
	cancelEvent : function()
	{
		return false;
	}
	// }}}	
	,
	// {{{ addEvent()
    /**
     *
     *  This function adds an event listener to an element on the page.
     *
     *	@param Object whichObject = Reference to HTML element(Which object to assigne the event)
     *	@param String eventType = Which type of event, example "mousemove" or "mouseup" (NOT "onmousemove")
     *	@param functionName = Name of function to execute. 
     * 
     * @public
     */	
	addEvent : function( obj, type, fn,suffix ) {
		if(!suffix)suffix = '';
		if ( obj.attachEvent ) {
			if ( typeof DHTMLSuite_funcs[type+fn+suffix] != 'function') {
				DHTMLSuite_funcs[type+fn+suffix] = function() {
					fn.apply(window.event.srcElement);
				};
				obj.attachEvent('on'+type, DHTMLSuite_funcs[type+fn+suffix] );
			}
			obj = null;
		} else {
			obj.addEventListener( type, fn, false );
		}
		this.__addEventEl(obj);
	}	

	// }}}	
	,	
	// {{{ removeEvent()
    /**
     *
     *  This function removes an event listener from an element on the page.
     *
     *	@param Object whichObject = Reference to HTML element(Which object to assigne the event)
     *	@param String eventType = Which type of event, example "mousemove" or "mouseup"
     *	@param functionName = Name of function to execute. 
     * 
     * @public
     */		
	removeEvent : function(obj,type,fn,suffix)
	{ 
		if ( obj.detachEvent ) {
		obj.detachEvent( 'on'+type, DHTMLSuite_funcs[type+fn+suffix] );
			DHTMLSuite_funcs[type+fn+suffix] = null;
			obj = null;
		} else {
			obj.removeEventListener( type, fn, false );
		}
	} 
	// }}}
	,
	// {{{ __clearMemoryGarbage()
    /**
     *
     *  This function is used for Internet Explorer in order to clear memory when the page unloads.
     *
     * 
     * @private
     */	
    __clearMemoryGarbage : function()
    {
   		/* Example of event which causes memory leakage in IE 
   		DHTMLSuite.commonObj.addEvent(expandRef,"click",function(){ window.refToMyMenuBar[index].__changeMenuBarState(this); })
   		We got a circular reference.
   		*/
    	if(!DHTMLSuite.clientInfoObj.isMSIE)return;
   	
    	for(var no=0;no<DHTMLSuite.eventEls.length;no++){
    		try{
    			var el = DHTMLSuite.eventEls[no];
	    		el.onclick = null;
	    		el.onmousedown = null;
	    		el.onmousemove = null;
	    		el.onmouseout = null;
	    		el.onmouseover = null;
	    		el.onmouseup = null;
	    		el.onfocus = null;
	    		el.onblur = null;
	    		el.onkeydown = null;
	    		el.onkeypress = null;
	    		el.onkeyup = null;
	    		el.onselectstart = null;
	    		el.ondragstart = null;
	    		el.oncontextmenu = null;
	    		el.onscroll = null;   
	    		el = null; 		
    		}catch(e){
    		}
    	}    	
    	
    	for(var no in DHTMLSuite.variableStorage.arrayDSObjects){
    		DHTMLSuite.variableStorage.arrayDSObjects[no] = null;    			
    	}
    	
    	window.onbeforeunload = null;
    	window.onunload = null;
    	DHTMLSuite = null;
    }		
    // }}}
    ,
	// {{{ __addEventEl()
    /**
     *
     *  Add element to garbage collection array. The script will loop through this array and remove event handlers onload in ie.
     *
     * 
     * @private
     */	    
    __addEventEl : function(el)
    {
    	DHTMLSuite.eventEls[DHTMLSuite.eventEls.length] = el;    
    }
    // }}}
    ,
	// {{{ getSrcElement()
    /**
     *
     *  Returns a reference to the HTML element which triggered an event.
     *	@param Event e = Event object
     *
     * 
     * @public
     */	       
    getSrcElement : function(e)
    {
    	var el;
		if (e.target) el = e.target;
			else if (e.srcElement) el = e.srcElement;
			if (el.nodeType == 3) // defeat Safari bug
				el = el.parentNode;
		return el;	
    }	
    // }}}
    ,
	// {{{ getKeyFromEvent()
    /**
     *
     *  Returns key from event object
     *	@param Event e = Event object
     * 
     * @public
     */	     
    getKeyFromEvent : function(e)
    {
		var code = this.getKeyCode(e);   	
    	return String.fromCharCode(code);
    }
    // }}}
    ,
	// {{{ getKeyCode()
    /**
     *
     *  Returns key code from event
     *	@param Event e = Event object
     * 
     * @public
     */	     
    getKeyCode : function(e)
    {
    	if (e.keyCode) code = e.keyCode; else if (e.which) code = e.which;  
    	return code;
    }
    // }}}	
    ,
	// {{{ isObjectClicked()
    /**
     *
     *  Returns true if an object is clicked, false otherwise. This method will also return true if you clicked on a sub element
     *	@param Object obj = Reference to HTML element
     *	@param Event e = Event object
     *
     * 
     * @public
     */	      
	isObjectClicked : function(obj,e)
	{
		var src = this.getSrcElement(e);
		var string = src.tagName + '(' + src.className + ')';
		if(src==obj)return true;
		while(src.parentNode && src.tagName.toLowerCase()!='html'){
			src = src.parentNode;
			string = string + ',' + src.tagName + '(' + src.className + ')';
			if(src==obj)return true;			
		}		
		return false;		
	}
	// }}}
	,
	// {{{ getObjectByClassName()
    /**
     *
     *  Walks up the DOM tree and returns first found object with a given class name
     *
     *	@param Event e = Event object
     *	@param String className = CSS - Class name
     *
     * 
     * @public
     */	 	
	getObjectByClassName : function(e,className)
	{
		var src = this.getSrcElement(e);
		if(src.className==className)return src;
		while(src && src.tagName.toLowerCase()!='html'){
			src = src.parentNode;	
			if(src.className==className)return src;
		}
		return false;
	}
	//}}}
	,
	// {{{ getObjectByAttribute()
    /**
     *
     *  Walks up the DOM tree and returns first found object with a given attribute set
     *
     *	@param Event e = Event object
     *	@param String attribute = Custom attribute
     *
     * 
     * @public
     */	 	
	getObjectByAttribute : function(e,attribute)
	{
		var src = this.getSrcElement(e);
		var att = src.getAttribute(attribute);
		if(!att)att = src[attribute];
		if(att)return src;
		while(src && src.tagName.toLowerCase()!='html'){
			src = src.parentNode;	
			var att = src.getAttribute('attribute');
			if(!att)att = src[attribute];		
			if(att)return src;
		}
		return false;
	}
	//}}}
	,
	// {{{ getUniqueId()
    /**
     *
     *  Returns a unique numeric id
     *
     *
     * 
     * @public
     */		
	getUniqueId : function()
	{
		var no = Math.random() + '';
		no = no.replace('.','');		
		var no2 = Math.random() + '';
		no2 = no2.replace('.','');		
		return no + no2;		
	}
	// }}}
	,
	// {{{ getAssociativeArrayFromString()
    /**
     *
     *  Returns an associative array from a comma delimited string
     *  @param String propertyString - commaseparated string(example: "id:myid,title:My title,contentUrl:includes/tab.inc")
     *
     *	@return Associative array of keys + property value(example: key: id, value : myId)
     * @public
     */		
	getAssociativeArrayFromString : function(propertyString)
	{
		if(!propertyString)return;
		var retArray = new Array();
		var items = propertyString.split(/,/g);
		for(var no=0;no<items.length;no++){
			var tokens = items[no].split(/:/);	
			retArray[tokens[0]] = tokens[1];			
		}	
		return retArray;	
	}
	// }}}
	,
	// {{{ correctPng()
    /**
     *
     *  Correct png for old IE browsers
     *  @param Object el - Id or direct reference to image
     *
     * @public
     */	
	correctPng : function(el)
	{
		el = DHTMLSuite.commonObj.getEl(el);	
		var img = el;
		var width = img.width;
		var height = img.height;
		var html = '<span style="display:inline-block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + img.src + '\',sizingMethod=\'scale\');width:' + width + ';height:' + height + '"></span>';
		img.outerHTML = html;	
					
	}
	,	
	// {{{ __evaluateJs()
    /**
     * Evaluate Javascript in the inserted content
     *
     * @private
     */	
	__evaluateJs : function(obj)
	{
		obj = this.getEl(obj);
		var scriptTags = obj.getElementsByTagName('SCRIPT');
		var string = '';
		var jsCode = '';
		for(var no=0;no<scriptTags.length;no++){	
			if(scriptTags[no].src){
		        var head = document.getElementsByTagName("head")[0];
		        var scriptObj = document.createElement("script");
		
		        scriptObj.setAttribute("type", "text/javascript");
		        scriptObj.setAttribute("src", scriptTags[no].src);  	
			}else{
				if(DHTMLSuite.clientInfoObj.isOpera){
					jsCode = jsCode + scriptTags[no].text + '\n';
				}
				else
					jsCode = jsCode + scriptTags[no].innerHTML;	
			}			
		}
		if(jsCode)this.__installScript(jsCode);
	}
	// }}}
	,
	// {{{ __installScript()
    /**
     *  "Installs" the content of a <script> tag.
     *
     * @private        
     */		
	__installScript : function ( script )
	{		
		try{
		    if (!script)
		        return;		
	        if (window.execScript){        	
	        	window.execScript(script)
	        }else if(window.jQuery && jQuery.browser.safari){ // safari detection in jQuery
	            window.setTimeout(script,0);
	        }else{        	
	            window.setTimeout( script, 0 );
	        } 
		}catch(e){
			
		}
	}	
	// }}}
	,
	// {{{ __evaluateCss()
    /**
     *  Evaluates css
     *
     * @private        
     */	
	__evaluateCss : function(obj)
	{
		obj = this.getEl(obj);
		var cssTags = obj.getElementsByTagName('STYLE');
		var head = document.getElementsByTagName('HEAD')[0];
		for(var no=0;no<cssTags.length;no++){
			head.appendChild(cssTags[no]);
		}	
	}	
}

/************************************************************************************************************
*	Client info class
*
*	Created:			August, 18th, 2006
* 	Update log:
*
************************************************************************************************************/

/**
* @constructor
* @class Purpose of class: Provide browser information to the classes below. Instead of checking for
*		 browser versions and browser types in the classes below, they should check this
*		 easily by referncing properties in the class below. An object("DHTMLSuite.clientInfoObj") of this 
*		 class will always be accessible to the other classes. * @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
**/


DHTMLSuite.clientInfo = function()
{
	var browser;			// Complete user agent information
	
	var isOpera;			// Is the browser "Opera"
	var isMSIE;				// Is the browser "Internet Explorer"
	var isOldMSIE;			// Is this browser and older version of Internet Explorer ( by older, we refer to version 6.0 or lower)	
	var isFirefox;			// Is the browser "Firefox"
	var navigatorVersion;	// Browser version
	var isOldMSIE;
}
	
DHTMLSuite.clientInfo.prototype = {
	
	// {{{ init()
    /**
     *  This method initializes the clientInfo object. This is done automatically when you create a widget object.
     *
     * @public
     */	    	
	init : function()
	{
		this.browser = navigator.userAgent;	
		this.isOpera = (this.browser.toLowerCase().indexOf('opera')>=0)?true:false;
		this.isFirefox = (this.browser.toLowerCase().indexOf('firefox')>=0)?true:false;
		this.isMSIE = (this.browser.toLowerCase().indexOf('msie')>=0)?true:false;
		this.isOldMSIE = (this.browser.toLowerCase().match(/msie\s[0-6]/gi))?true:false;
		this.isSafari = (this.browser.toLowerCase().indexOf('safari')>=0)?true:false;
		this.navigatorVersion = navigator.appVersion.replace(/.*?MSIE\s(\d\.\d).*/g,'$1')/1;
		this.isOldMSIE = (this.isMSIE&&this.navigatorVersion<7)?true:false;
	}	
	// }}}		
	,
	// {{{ getBrowserWidth()
    /**
     *
	 *
     *  This method returns the width of the browser window(i.e. inner width)
     *
     * 
     * @public
     */		
	getBrowserWidth : function()
	{
		if(self.innerWidth)return self.innerWidth;
		return document.documentElement.offsetWidth;		
	}
	// }}}
	,
	// {{{ getBrowserHeight()
    /**
     *
	 *
     *  This method returns the height of the browser window(i.e. inner height)
     *
     * 
     * @public
     */		
	getBrowserHeight : function()
	{
		if(self.innerHeight)return self.innerHeight;
		return document.documentElement.offsetHeight;
	}
}



/************************************************************************************************************
*	DOM query class 
*
*	Created:			August, 31th, 2006
*
* 	Update log:
*
************************************************************************************************************/

/**
* @constructor
* @class Purpose of class:	Gives you a set of methods for querying elements on a webpage. When an object
*		 of this class has been created, the method will also be available via the document object.
*		 Example: var elements = document.getElementsByClassName('myClass');
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
**/

DHTMLSuite.domQuery = function()
{
	// Make methods of this class a member of the document object. 
	document.getElementsByClassName = this.getElementsByClassName;
	document.getElementsByAttribute = this.getElementsByAttribute;
}



	
DHTMLSuite.domQuery.prototype = {
}




/*[FILE_START:dhtmlSuite-tabView.js] */	
/************************************************************************************************************
*	Tab view class
*
*	Created:			August, 21st, 2006
*
* 	Update log:
*
************************************************************************************************************/

	
var refToTabViewObjects = new Array();	// Reference to objects of this class. 
										// We need this because the script doesn't allways know which object to use

/**
* @constructor
* @class Purpose of class:	Tab view class - transfors plain HTML into tabable layers.<br>
* (See <a target="_blank" href="../../demos/demo-tabs-1.html">demo 1</A> and <a target="_blank" href="../../demos/demo-tabs-2.html">demo 2</A>)
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
**/

DHTMLSuite.tabView = function()
{
	var textPadding;				// Tab spacing
	var strictDocType ; 			// Using a strict document type, i.e. <!DOCTYPE>

	var DHTMLSuite_tabObj;		// Reference to div surrounding the tab set
	var activeTabIndex;				// Currently displayed tab(index - 0 = first tab)
	var initActiveTabIndex;			// Initially displayed tab(index - 0 = first tab)
	var ajaxObjects;				// Reference to ajax objects
	var tabView_countTabs;
	var tabViewHeight;
	var tabSetParentId;				// Id of div surrounding the tab set.
	var tabTitles;					// Tab titles
	var width;						// width of tab view
	var height;						// height of tab view
	var layoutCSS;
	var outsideObjectRefIndex;		// Which index of refToTabViewObjects refers to this object.
	var maxNumberOfTabs;
	var dynamicContentObj;	
	var closeButtons;
	var refActiveTabContent;
	
	var callbackOnTabSwitch;
	
	this.initActiveTabIndex = 0;
	this.callbackOnTabSwitch = '';
	this.refActiveTabContent = '';
	// Default variable values
	this.textPadding = 3;
	this.strictDocType = true; 	
	this.ajaxObjects = new Array();
	this.tabTitles = new Array();
	this.layoutCSS = 'tab-view.css';
	this.maxNumberOfTabs = 6;
	this.dynamicContentObj = false;
	this.closeButtons = new Array();
	this.width = '100%';
	this.height = '500';
	
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();	// This line starts all the init methods
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}
}

DHTMLSuite.tabView.prototype = {
	// {{{ init()
    /**
     * Initialize the script
     * 
     * @public
     */	
	init : function()
	{		
		DHTMLSuite.commonObj.loadCSS(this.layoutCSS);
		this.outsideObjectRefIndex = refToTabViewObjects.length;
		refToTabViewObjects[this.outsideObjectRefIndex] = this;
		try{
			this.dynamicContentObj = new DHTMLSuite.dynamicContent();
		}catch(e){
			alert('You need to include DHTMLSuite-dynamicContent.js');
		}
		this.__initializeAndParseTabs(false,false);
		
	}
	// }}}
	,
	// {{{ setCallbackOnTabSwitch()
    /**
     * Set callback on tab switch
     * 
     * @param String callbackOnTabSwitch = Name of function to execute when the user switches to a different tab.
     *
     * @public
     */			
	setCallbackOnTabSwitch : function(callbackOnTabSwitch)
	{
		this.callbackOnTabSwitch = callbackOnTabSwitch;
	}
	// }}}
	,
	// {{{ getMaximumNumberOfTabs()
    /**
     * Return maximum number of tabs
     * 
     * @return Int maximumNumberOfTabs = Maximum number of tabs
     *
     * @public
     */		
	getMaximumNumberOfTabs : function()
	{
		return this.maxNumberOfTabs;
	}
	// }}}	
	,
	// {{{ setMaximumTabs()
    /**
     * Set maximum number of tabs
     * 
     * @param Int maximumNumberOfTabs = Maximum number of tabs
     *
     * @public
     */	
	setMaximumTabs : function(maximumNumberOfTabs)
	{
		this.maxNumberOfTabs = maximumNumberOfTabs;
	}       
    // }}}	
    ,
	// {{{ setParentId()
    /**
     * Set padding on tabs
     * 
     * @param String idOfParentHTMLElement = id of parent div
     *
     * @public
     */	
	setParentId : function(idOfParentHTMLElement)
	{
		this.tabSetParentId = idOfParentHTMLElement;
		this.DHTMLSuite_tabObj = document.getElementById(idOfParentHTMLElement);
	}       
    // }}}	
    ,
	// {{{ setWidth()
    /**
     * Set width of tab view
     * 
     * @param String Width of tab view
     *
     * @public
     */	
	setWidth : function(newWidth)
	{
		this.width = newWidth;
	}    
    // }}}	
    ,
	// {{{ setHeight()
    /**
     * Set height of tab view on tabs
     * 
     * @param String Height of tab view
     *
     * @public
     */	
	setHeight : function(newHeight)
	{
		this.height = newHeight;
	}   
    // }}}	
    ,	
	// {{{ setIndexActiveTab()
    /**
     * Set index of initially active tab
     * 
     * @param Int indexOfNewActiveTab = Index of active tab(0 = first tab)
     *
     * @public
     */	
	setIndexActiveTab : function(indexOfNewActiveTab)
	{
		this.initActiveTabIndex = indexOfNewActiveTab;
	}   
    
    // }}}	
    ,	
	// {{{ setTabTitles()
    /**
     * Set title of tabs
     * 
     * @param Array titleOfTabs = Title of tabs
     *
     * @public
     */	
	setTabTitles : function(titleOfTabs)
	{
		this.tabTitles = titleOfTabs;
	}    
    
    // }}}	
    ,	
	// {{{ setCloseButtons()
    /**
     * Specify which tabs that should have close buttons
     * 
     * @param Array closeButtons = Array of true or false
     *
     * @public
     */	
	setCloseButtons : function(closeButtons)
	{
		this.closeButtons = closeButtons;
	}    
    // }}}
    ,
	// {{{ getReferenceToDivElement()
    /**
     * 
     * Returns a reference to the div element of a tab.
     *
     * @param String tabTitle = Title of tab
     * @return Object Element to HTML div element for this tab.
     *
     * @public
     */	    
    getReferenceToDivElementByTitle : function(tabTitle)
    {
    	var index = this.getTabIndexByTitle(tabLabel);	// Get index of tab
    	if(index!=-1){
    		var obj = document.getElementById('tabView' + this.tabSetParentId + '_' + index);
    		return obj;    		
    	}   	
    	return false;
    }
    // }}}
    ,
	// {{{ getReferenceToDivElementById()
    /**
     * 
     * Returns a reference to the div element of a tab.
     *
     * @param String idOfTab = id of tab
     * @return Object Element to HTML div element for this tab.
     *
     * @public
     */	     
    getReferenceToDivElementById : function(idOfTab)
    {
		var divs = this.DHTMLSuite_tabObj.getElementsByTagName('DIV');
		
		for(var no=0;no<divs.length;no++){
			var attr = divs[no].getAttribute('originalId');
			if(!attr)attr = divs[no].originalid;
			if(attr == idOfTab)return divs[no];
		}
		return false;
    	
    }
    // }}}	
	,
	// {{{ createNewTab()
    /**
     * 
     * Creates new tab dynamically
     *
     * @param String parentId = Id of tabset
     * @param String tabTitle = Title of new tab
     * @param String tabContent = Content of new tab(Optional)
     * @param String tabContentUrl = Url to content of new tab(Optional) - Ajax is used to get this content
     *
     * @return Boolean Success - true if the tab was created, false otherwise, i.e. tab with same label already exists.
     *
     * @public
     */		
	createNewTab : function(parentId,tabTitle,tabContent,tabContentUrl,closeButton) 
    { 
      var index = this.getTabIndexByTitle(tabTitle);   // Get index of tab 
      if(index!=-1){   // Tab exists if index<>-1 
         this.displayATab(tabTitle,index); 
         return false; 
      } 
      if(this.tabView_countTabs>=this.maxNumberOfTabs)return;   // Maximum number of tabs reached - return 
      var div = document.createElement('DIV');   // Create new tab content div. 
      div.className = 'DHTMLSuite_aTab';   // Assign new tab to CSS class DHTMLSuite_aTab 
      this.DHTMLSuite_tabObj.appendChild(div);         // Appending new tab content div to main tab view div 
      var tabId = this.__initializeAndParseTabs(true,tabTitle,closeButton);   // Call the init method in order to create tab header and tab images 
      if(tabContent)div.innerHTML = tabContent;   // Static tab content specified, put it into the new div 
      if(tabContentUrl){   // Get content from external file 
         this.dynamicContentObj.loadContent('tabView' + parentId +'_' + tabId,tabContentUrl); 
      } 
      return true;
   } 

	// }}}	    
    ,	
 	// {{{ deleteTab()
    /**
     *
     * Delete a tab 
     *
     * @param String tabLabel = Label of tab to delete(Optional)
     * @param Int tabIndex = Index of tab to delete(Optional)
     *
     * @public
     */		
	deleteTab : function(tabLabel,tabIndex)
	{		
		if(tabLabel){	// Delete tab by tab title
			var index = this.getTabIndexByTitle(tabLabel);	// Get index of tab
			if(index!=-1){	// Tab exists if index<>-1
				this.deleteTab(false,index);
			}
			
		}else if(tabIndex>=0){	// Delete tab by tab index.
			if(document.getElementById('tabTab' + this.tabSetParentId + '_' + tabIndex)){
				var obj = document.getElementById('tabTab' + this.tabSetParentId + '_' + tabIndex);
				var id = obj.parentNode.parentNode.id;
				DHTMLSuite.discardElement(obj);
				var obj2 = document.getElementById('tabView' + this.tabSetParentId + '_' + tabIndex);
				DHTMLSuite.discardElement(obj2);
				this.__resetTabIds(this.tabSetParentId);
				this.initActiveTabIndex=-1;
				var newIndex = 0;
				if(refToTabViewObjects[this.outsideObjectRefIndex].activeTabIndex==tabIndex)refToTabViewObjects[this.outsideObjectRefIndex].activeTabIndex=-1;
				this.__showTab(this.tabSetParentId,newIndex,this.outsideObjectRefIndex);
			}			
		}		
	}
	// }}}	
	,  	// {{{ addContentToTab()
    /**
     * Add content to a tab dynamically.
     * 
     * @param String tabLabel = Label of tab to delete(Optional)
     * @param String filePath = Path to file you want to show inside the tab.
     *
     * @public
     */		
	addContentToTab : function(tabLabel,filePath)
	{		
		var index = this.getTabIndexByTitle(tabLabel);	// Get index of tab
		if(index!=-1){	// Tab found
			this.dynamicContentObj.loadContent('tabView' + this.tabSetParentId + '_' + index,filePath);		
		}
	}
	// }}}	
	, 
 	// {{{ displayATab()
    /**
     * Display a tab manually
     * 
     * @param String tabTitle = Label of tab to show(Optional)
     * @param Int tabIndex = Index of tab to show(Optional)
     *
     * @public
     */		

	displayATab : function(tabLabel,tabIndex)
	{		
		if(tabLabel){	// Delete tab by tab title
			var index = this.getTabIndexByTitle(tabLabel);	// Get index of tab
			if(index!=-1){	// Tab exists if index<>-1
				this.initActiveTabIndex = index;
			}else return false;
			
		}else{
			this.initActiveTabIndex = tabIndex;
		}

		this.__showTab(this.tabSetParentId,this.initActiveTabIndex,this.outsideObjectRefIndex)
	}	
	// }}}	
	,  	
 	// {{{ getTabIndex()
    /**
     * Return index of active tab
     * 
     * @type Integer tabIndex = Index of active tab(0 = first tab)
     *
     * @public
     */		
	getTabIndex : function()
	{
		var divs = this.DHTMLSuite_tabObj.getElementsByTagName('DIV');
		var tabIndex = 0;
		for(var no=0;no<divs.length;no++){
			if(divs[no].id.indexOf('tabTab')>=0){
				if(divs[no].className!='tabInactive')return tabIndex;
				tabIndex++;		
			}
		}		
		//tabInactive	
		return tabIndex;		
	}	
	// }}}
	,   
	
	// {{{ __setPadding()
    /**
     * Set padding on tabs
     * 
     * @private
     */		
	__setPadding : function(obj,padding){
		var span = obj.getElementsByTagName('SPAN')[0];
		span.style.paddingLeft = padding + 'px';	
		span.style.paddingRight = padding + 'px';	
	}	
	// }}}	
	,
	// {{{ __showTab()
    /**
     * Set padding
     * 
     * @param String parentId = id of parent div
     * @param Int tabIndex = Index of tab to show
     * @param Int objectIndex = Index of refToTabViewObjects, reference to the object of this class.
     *
     * @private
     */		
	__showTab : function(parentId,tabIndex,objectIndex)
	{
		var parentId_div = parentId + "_";
		if(!document.getElementById('tabView' + parentId_div + tabIndex)){			
			return;
		}
		
		if(refToTabViewObjects[objectIndex].activeTabIndex>=0){
			if(refToTabViewObjects[objectIndex].activeTabIndex==tabIndex){
				return;
			}	
			var obj = document.getElementById('tabTab'+parentId_div + refToTabViewObjects[objectIndex].activeTabIndex);	
			if(!obj){
				refToTabViewObjects[objectIndex].activeTabIndex = 0;
				var obj = document.getElementById('tabTab'+parentId_div + refToTabViewObjects[objectIndex].activeTabIndex);	
			}
			obj.className='tabInactive';
			obj.style.backgroundImage = 'url(\'' + DHTMLSuite.configObj.imagePath + 'tab-view/tab_left_inactive.gif' + '\')';
			var imgs = obj.getElementsByTagName('IMG');
			var img = imgs[imgs.length-1];
			img.src = DHTMLSuite.configObj.imagePath + 'tab-view/tab_right_inactive.gif';
			document.getElementById('tabView' + parentId_div + refToTabViewObjects[objectIndex].activeTabIndex).style.display='none';
		}
		
		var thisObj = document.getElementById('tabTab'+ parentId_div +tabIndex);	
			
		thisObj.className='tabActive';
		thisObj.style.backgroundImage = 'url(\'' + DHTMLSuite.configObj.imagePath + 'tab-view/tab_left_active.gif' + '\')';
		var imgs = thisObj.getElementsByTagName('IMG');
		var img = imgs[imgs.length-1];		
		img.src = DHTMLSuite.configObj.imagePath + 'tab-view/tab_right_active.gif';
		
		document.getElementById('tabView' + parentId_div + tabIndex).style.display='block';
		this.refActiveTabContent = document.getElementById('tabView' + parentId_div + tabIndex);
		refToTabViewObjects[objectIndex].activeTabIndex = tabIndex;
		
		refToTabViewObjects[objectIndex].__handleCallback('tabSwitch');

		var parentObj = thisObj.parentNode;
		var aTab = parentObj.getElementsByTagName('DIV')[0];
		countObjects = 0;
		var startPos = 2;
		var previousObjectActive = false;
		while(aTab){
			if(aTab.tagName=='DIV'){
				if(previousObjectActive){
					previousObjectActive = false;
					startPos-=2;
				}
				if(aTab==thisObj){
					startPos-=2;
					previousObjectActive=true;
					refToTabViewObjects[objectIndex].__setPadding(aTab,refToTabViewObjects[objectIndex].textPadding+1);
				}else{
					refToTabViewObjects[objectIndex].__setPadding(aTab,refToTabViewObjects[objectIndex].textPadding);
				}
				
				aTab.style.left = startPos + 'px';
				countObjects++;
				startPos+=2;
			}			
			aTab = aTab.nextSibling;
		}
		
		return;
	}
	// }}}
	,
	// {{{ __handleCallback()
    /**
     * Set padding
     * 
     * @param String action = Which call back action
     *
     * @private
     */		
	__handleCallback : function(action)
	{		
		var callbackString = '';
		switch(action)
		{
			case "tabSwitch":
				callbackString = this.callbackOnTabSwitch;			
				break;			
		}	
		
		if(callbackString){
			callbackString = callbackString + '(this.refActiveTabContent)';
			eval(callbackString);
		}		
	}
	// }}}	
	,
	// {{{ tabClick()
    /**
     * Set padding
     * 
     * @param String parentId = id of parent div
     * @param Int tabIndex = Index of tab to show
     *
     * @private
     */	
	__tabClick : function(inputObj,index)
	{
		var idArray = inputObj.id.split('_');	
		var parentId = inputObj.getAttribute('parentRefId');
		if(!parentId)parentId=  inputObj.parentRefId;
		this.__showTab(parentId,idArray[idArray.length-1].replace(/[^0-9]/gi,''),index);
		
	}	
	// }}}
	,
	// {{{ rolloverTab()
    /**
     * Set padding
     * 
     *
     * @private
     */		
	__rolloverTab : function()
	{
		if(this.className.indexOf('tabInactive')>=0){
			this.className='inactiveTabOver';
			this.style.backgroundImage = 'url(\'' + DHTMLSuite.configObj.imagePath + 'tab-view/tab_left_over.gif' + '\')';
			var imgs = this.getElementsByTagName('IMG');
			var img = imgs[imgs.length-1];
			
			img.src = DHTMLSuite.configObj.imagePath + 'tab-view/tab_right_over.gif';
		}
		
	}	
	// }}}
	,	
	// {{{ rolloutTab()
    /**
     * 
     *
     * @private
     */			
	__rolloutTab : function()
	{
		if(this.className ==  'inactiveTabOver'){
			this.className='tabInactive';
			this.style.backgroundImage = 'url(\'' + DHTMLSuite.configObj.imagePath + 'tab-view/tab_left_inactive.gif' + '\')';
			var imgs = this.getElementsByTagName('IMG');
			var img = imgs[imgs.length-1];
			img.src = DHTMLSuite.configObj.imagePath + 'tab-view/tab_right_inactive.gif';
		}		
	}
	// }}}
	,
	// {{{ __initializeAndParseTabs()
    /**
     * 
     * @param Int additionalTab = Additional tabs to the existing
     * @param String nameOfAdditionalTab = Title of additional tab.
     *
     * @private
     */	
	__initializeAndParseTabs : function(additionalTab,nameOfAdditionalTab,additionalCloseButton)
	{
		this.DHTMLSuite_tabObj.className = ' DHTMLSuite_tabWidget';
		
		window.refToThisTabSet = this;
		if(!additionalTab || additionalTab=='undefined'){			
			this.DHTMLSuite_tabObj = document.getElementById(this.tabSetParentId);
			this.width = this.width + '';
			if(this.width.indexOf('%')<0)this.width= this.width + 'px';
			this.DHTMLSuite_tabObj.style.width = this.width;
						
			this.height = this.height + '';
			if(this.height.length>0){
				if(this.height.indexOf('%')<0)this.height= this.height + 'px';
				this.DHTMLSuite_tabObj.style.height = this.height;
			}
			
			var tabDiv = document.createElement('DIV');		
			var firstDiv = this.DHTMLSuite_tabObj.getElementsByTagName('DIV')[0];	
			
			this.DHTMLSuite_tabObj.insertBefore(tabDiv,firstDiv);	
			tabDiv.className = 'DHTMLSuite_tabContainer';			
			this.tabView_countTabs = 0;
			var tmpTabTitles = this.tabTitles;	// tmpTab titles set to current tab titles - this variable is used in the loop below
												// We don't want to loop through all the tab titles in the object when we add a new one manually.
			
		}else{	// A new tab being created dynamically afterwards.
			var tabDiv = this.DHTMLSuite_tabObj.getElementsByTagName('DIV')[0];
			var firstDiv = this.DHTMLSuite_tabObj.getElementsByTagName('DIV')[1];
			this.initActiveTabIndex = this.tabView_countTabs;		
			var tmpTabTitles = Array(nameOfAdditionalTab);	// tmpTab titles set to only the new tab
		}			
		for(var no=0;no<tmpTabTitles.length;no++){
			var aTab = document.createElement('DIV');
			aTab.id = 'tabTab' + this.tabSetParentId + "_" +  (no + this.tabView_countTabs);
			aTab.onmouseover = this.__rolloverTab;
			aTab.onmouseout = this.__rolloutTab;
			aTab.setAttribute('parentRefId',this.tabSetParentId);
			aTab.parentRefId = this.tabSetParentId;
			var numIndex = window.refToThisTabSet.outsideObjectRefIndex+'';
			aTab.onclick = function() { window.refToThisTabSet.__tabClick(this,numIndex); };
			DHTMLSuite.commonObj.__addEventEl(aTab);
			aTab.className='tabInactive';
			aTab.style.backgroundImage = 'url(\'' + DHTMLSuite.configObj.imagePath + 'tab-view/tab_left_inactive.gif' + '\')';
			tabDiv.appendChild(aTab);
			var span = document.createElement('SPAN');
			span.innerHTML = tmpTabTitles[no];
			aTab.appendChild(span);

			if((!additionalTab && this.closeButtons[no]) || (additionalTab && additionalCloseButton)){				
				var closeButton = document.createElement('IMG');
				closeButton.src = DHTMLSuite.configObj.imagePath + 'tab-view/tab-view-close.gif';
				closeButton.style.position='absolute';
				closeButton.style.top = '4px';
				closeButton.style.right = '2px';
				closeButton.onmouseover = this.__mouseOverEffectCloseButton;
				closeButton.onmouseout = this.__mouseOutEffectForCloseButton;
				DHTMLSuite.commonObj.__addEventEl(closeButton);
				span.innerHTML = span.innerHTML + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';				
				var deleteTxt = span.innerHTML+'';
				closeButton.onclick = function(){ refToTabViewObjects[numIndex].deleteTab( this.parentNode.innerHTML) };
				span.appendChild(closeButton);
			}
						
			var img = document.createElement('IMG');
			img.valign = 'bottom';
			img.src = DHTMLSuite.configObj.imagePath + 'tab-view/tab_right_inactive.gif';
			// IE5.X FIX
			if((DHTMLSuite.clientInfoObj.navigatorVersion && DHTMLSuite.clientInfoObj.navigatorVersion<6) || (DHTMLSuite.clientInfoObj.isMSIE && !this.strictDocType)){
				img.style.styleFloat = 'none';
				img.style.position = 'relative';	
				img.style.top = '4px'
				span.style.paddingTop = '4px';
				aTab.style.cursor = 'hand';
			}	// End IE5.x FIX
			aTab.appendChild(img);
		}

		var tabs = this.DHTMLSuite_tabObj.getElementsByTagName('DIV');
		var divCounter = 0;
		for(var no=0;no<tabs.length;no++){
			if(tabs[no].className=='DHTMLSuite_aTab' && tabs[no].parentNode == this.DHTMLSuite_tabObj){
				if(this.height.length>0){
					if(this.height.indexOf('%')==-1){
						var tmpHeight = (this.height.replace('px','')/1 - 22);
						tabs[no].style.height = tmpHeight + 'px';
					}else
						tabs[no].style.height = this.height;
				}
				tabs[no].style.display='none';
				if(tabs[no].id){
					tabs[no].setAttribute('originalId',tabs[no].id);
					tabs[no].originalId = tabs[no].id;					
				}
				tabs[no].id = 'tabView' + this.tabSetParentId + "_" + divCounter;
				divCounter++;
			}			
		}	
		if(additionalTab){
			this.tabView_countTabs++;
		}else{
			this.tabView_countTabs = this.tabView_countTabs + this.tabTitles.length;	
		}
		
		this.__showTab(this.tabSetParentId,this.initActiveTabIndex,this.outsideObjectRefIndex);

		return this.activeTabIndex;
	}
	// }}}	
	,
	// {{{ __mouseOutEffectForCloseButton()
    /**
     * 
     * @private
     */	    	
	__mouseOutEffectForCloseButton : function()
	{
		this.src = this.src.replace('close-over.gif','close.gif');	
	}	
	// }}}	
	,	
	// {{{ __mouseOverEffectCloseButton()
    /**
     * 
     * @private
     */	    	
	__mouseOverEffectCloseButton : function()
	{
		this.src = this.src.replace('close.gif','close-over.gif');	
	}	
	// }}}	
	,		
	// {{{ __fillTabWithContentFromAjax()
    /**
     * 
      * @param Int ajaxIndex = Index of Ajax array
      * @param String objId = Id of element where content from Ajax should be displayed
      * @param Int tabId = Id of element where content from Ajax should be displayed
     *
     * @private
     */	    	
	__fillTabWithContentFromAjax : function(ajaxIndex,objId,tabId)
	{
		var obj = document.getElementById('tabView'+objId + '_' + tabId);
		obj.innerHTML = this.ajaxObjects[ajaxIndex].response;		
	}	
	// }}}	
	,
	// {{{ __resetTabIds()
    /**
     * 
     * @private
     */		
	__resetTabIds : function(parentId)
	{
		var tabTitleCounter = 0;
		var tabContentCounter = 0;		
		var divs = this.DHTMLSuite_tabObj.getElementsByTagName('DIV');	

		for(var no=0;no<divs.length;no++){
			if(divs[no].className=='DHTMLSuite_aTab' && divs[no].parentNode==this.DHTMLSuite_tabObj){
				divs[no].id = 'tabView' + parentId + '_' + tabTitleCounter;
				tabTitleCounter++;
			}
			if(divs[no].id.indexOf('tabTab')>=0 && divs[no].parentNode.parentNode==this.DHTMLSuite_tabObj){
				divs[no].id = 'tabTab' + parentId + '_' + tabContentCounter;	
				tabContentCounter++;
			}		
						
		}	
		this.tabView_countTabs = tabContentCounter;
	}
	// }}}	
	,
	// {{{ getTabIndexByTitle()
    /**
     * 
     * @private
     */		
	getTabIndexByTitle : function(tabTitle)
	{
		tabTitle = tabTitle.replace(/(.*?)&nbsp.*$/gi,'$1');
		var divs = this.DHTMLSuite_tabObj.getElementsByTagName('DIV');
		
		for(var no=0;no<divs.length;no++){
			if(divs[no].id.indexOf('tabTab')>=0){
				var span = divs[no].getElementsByTagName('SPAN')[0];	
				var spanTitle = span.innerHTML.replace(/(.*?)&nbsp.*$/gi,'$1');
				if(spanTitle == tabTitle){
					var tmpId = divs[no].id.split('_');					
					return tmpId[tmpId.length-1].replace(/[^0-9]/g,'')/1;
				}		
			}
		}		
		return -1;		
	}
	// }}}				
}


/*[FILE_START:dhtmlSuite-ajaxUtil.js] */	
/************************************************************************************************************
*	Ajax dynamic content script
*
*	Created:					August, 23rd, 2006
*
*			
* 	Update log:
*
************************************************************************************************************/

/**
* @constructor
* @class The purpose of this class is to load content of external files into HTML elements on your page(<a href="../../demos/demo-dynamic-content-1.html" target="_blank">demo</a>).
* @version				1.0
* @version 1.0
* 
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
**/

DHTMLSuite.ajaxUtil = function()
{
	var ajaxObjects;
	this.ajaxObjects = new Array();	
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();	// This line starts all the init methods
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}
	var objectIndex;	
	this.objectIndex = DHTMLSuite.variableStorage.arrayDSObjects.length;
	DHTMLSuite.variableStorage.arrayDSObjects[this.objectIndex] = this;
		
}

DHTMLSuite.ajaxUtil.prototype = {	
	// {{{ sendRequest()
    /**
     * Sends an ajax request to the server
     *
     * @param String url = Path on the server
     * @param String paramString - Parameters,  Example: "varA=2&varB=3";
     * @param String functionNameOnComplete = Function to execute on complete, example: "myFunction". The ajax object will be sent to this function and you can get the response from the "reponse" attribute.
     *					NB! This ajax object will be cleared automatically by the script after a 3 second delay.
     * 
     * @public
     */		
	sendRequest : function(url,paramString,functionNameOnComplete)
	{
		var ind = this.objectIndex;
		var ajaxIndex = this.ajaxObjects.length;
		try{
			this.ajaxObjects[ajaxIndex] = new sack();
		}catch(e){
			alert('Could not create ajax object. Please make sure that ajax.js is included');
		}
		if(paramString){			
			var params = this.__getArrayByParamString(paramString);	
			for(var no=0;no<params.length;no++){
				this.ajaxObjects[ajaxIndex].setVar(params[no].key,params[no].value);				
			}		
		}
		this.ajaxObjects[ajaxIndex].requestFile = url;	// Specifying which file to get
		this.ajaxObjects[ajaxIndex].onCompletion = function(){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__onComplete(ajaxIndex,functionNameOnComplete); };	// Specify function that will be executed after file has been found
		this.ajaxObjects[ajaxIndex].onError = function(){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__onError(ajaxIndex,url); };	// Specify function that will be executed after file has been found
		this.ajaxObjects[ajaxIndex].runAJAX();		// Execute AJAX function	
	}
	// }}}
	,
	// {{{ __getArrayByParamString()
    /**
     * Sends an ajax request to the server
     *
     * @param String paramString - Parameters,  Example: "varA=2&varB=3";
     * @return Array of key+value
     * 
     * @private
     */		
	__getArrayByParamString : function(paramString)
	{
		var retArray = new Array();
		var items = paramString.split(/&/g);
		for(var no=0;no<items.length;no++){
			var tokens = items[no].split(/=/);
			var index = retArray.length;
			retArray[index] = { key:tokens[0],value:tokens[1] }
		}
		return retArray;
	}
	// }}}
	,
	// {{{ __onError()
    /**
     * On error event
     *
     * @param Integer ajaxIndex - Index of ajax object
     * @return String url - failing url
     * 
     * @private
     */	
	__onError : function(ajaxIndex,url)
	{
		alert('Could not send Ajax request to ' + url);
	}
	// }}}
	,
	// {{{ __onComplete()
    /**
     * On complete event
     *
     * @param Integer ajaxIndex - Index of ajax object
     * @return String functionNameOnComplete - function to execute
     * 
     * @private
     */	
	__onComplete : function(ajaxIndex,functionNameOnComplete)
	{
		var ind = this.objectIndex;	
		if(functionNameOnComplete){			
			eval(functionNameOnComplete+'(DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].ajaxObjects[' + ajaxIndex + '])');
		}	
		
		setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__deleteAjaxObject(' + ajaxIndex + ')',3000);
	}
	// }}}
	,
	// {{{ __deleteAjaxObject()
    /**
     * Remove ajax object from memory
     *
     * @param Integer ajaxIndex - Index of ajax object
     * 
     * @private
     */
	__deleteAjaxObject : function(ajaxIndex)
	{
		this.ajaxObjects[ajaxIndex] = false;	
	}
}
// Creating global variable of this class
DHTMLSuite.ajax = new DHTMLSuite.ajaxUtil();

/*[FILE_START:dhtmlSuite-dynamicContent.js] */	
/************************************************************************************************************
*	Ajax dynamic content script
*
*	Created:					August, 23rd, 2006
*
*			
* 	Update log:
*
************************************************************************************************************/
/**
* @constructor
* @class The purpose of this class is to load content of external files into HTML elements on your page(<a href="../../demos/demo-dynamic-content-1.html" target="_blank">demo</a>).<br>
*		 The pane splitter, window widget and the ajax tooltip script are also using this class to put external content into HTML elements.
* @version				1.0
* @version 1.0
* 
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
**/

DHTMLSuite.dynamicContent = function()
{
	var enableCache;	// Cache enabled.
	var jsCache;
	var ajaxObjects;
	var waitMessage;
	
	this.enableCache = true;
	this.jsCache = new Object();
	this.ajaxObjects = new Array();
	this.waitMessage = 'Loading content - please wait...';
	this.waitImage = 'dynamic-content/ajax-loader-darkblue.gif';
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();	// This line starts all the init methods
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}
	var objectIndex;
	
	this.objectIndex = DHTMLSuite.variableStorage.arrayDSObjects.length;
	DHTMLSuite.variableStorage.arrayDSObjects[this.objectIndex] = this;
		
}

DHTMLSuite.dynamicContent.prototype = {

	// {{{ loadContent()
    /**
     * Load content from external files into an element on your web page.
     *
     * @param String divId = Id of HTML element
     * @param String url = Path to content on the server(Local content only)
     * @param String functionToCallOnLoaded = Function to call when ajax is finished. This string will be evaulated, example of string: "fixContent()" (with the quotes).
     * 
     * @public
     */	
	loadContent : function(divId,url,functionToCallOnLoaded)
	{
		
		var ind = this.objectIndex;
		if(this.enableCache && this.jsCache[url]){
			document.getElementById(divId).innerHTML = this.jsCache[url];
			DHTMLSuite.commonObj.__evaluateJs(divId);
			DHTMLSuite.commonObj.__evaluateCss(divId);	
			if(functionToCallOnLoaded)eval(functionToCallOnLoaded);	
			return;
		}
		var ajaxIndex = 0;
		
		/* Generating please wait message */
		var waitMessageToShow = '';
		if(this.waitImage){	// Wait image exists ?
			waitMessageToShow = waitMessageToShow + '<div style="text-align:center;padding:10px"><img src="' + DHTMLSuite.configObj.imagePath + this.waitImage + '" border="0" alt=""></div>';
		}
		if(this.waitMessage){	// Wait message exists ?
			waitMessageToShow = waitMessageToShow + '<div style="text-align:center">' + this.waitMessage + '</div>';
		}		
		try{
			document.getElementById(divId).innerHTML = waitMessageToShow ;
		}catch(e){			
		}		
		waitMessageToShow = false;
		var ajaxIndex = this.ajaxObjects.length;		
		
		try{
			this.ajaxObjects[ajaxIndex] = new sack();
		}catch(e){
			alert('Could not create ajax object. Please make sure that ajax.js is included');
		}
	
		
		
		if(url.indexOf('?')>=0){	// Get variables in the url
			this.ajaxObjects[ajaxIndex].method='GET';	// Change method to get
			var string = url.substring(url.indexOf('?'));	// Extract get variables
			url = url.replace(string,'');
			string = string.replace('?','');
			var items = string.split(/&/g);
			for(var no=0;no<items.length;no++){
				var tokens = items[no].split('=');
				if(tokens.length==2){
					this.ajaxObjects[ajaxIndex].setVar(tokens[0],tokens[1]);
				}	
			}	
			url = url.replace(string,'');
		}	

		
		
			
		this.ajaxObjects[ajaxIndex].requestFile = url;	// Specifying which file to get
		this.ajaxObjects[ajaxIndex].onCompletion = function(){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__ajax_showContent(divId,ajaxIndex,url,functionToCallOnLoaded); };	// Specify function that will be executed after file has been found
		this.ajaxObjects[ajaxIndex].onError = function(){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__ajax_displayError(divId,ajaxIndex,url,functionToCallOnLoaded); };	// Specify function that will be executed after file has been found
		this.ajaxObjects[ajaxIndex].runAJAX();		// Execute AJAX function	
	}
	// }}}		
	,
	// {{{ setWaitMessage()
    /**
     * Specify which message to show when Ajax is busy.
     *
     * @param String newWaitMessage = New wait message (Default = "Loading content - please wait") - use false if you don't want any wait message
     * 
     * @public
     */		
	setWaitMessage : function(newWaitMessage)
	{
		this.waitMessage = newWaitMessage;		
	}
	// }}}
	,
	// {{{ setWaitImage()
    /**
     * Specify an image to show when Ajax is busy working.
     *
     * @param String newWaitImage = New wait image ( default = ajax-loader-blue.gif - it is by default located inside the image_dhtmlsuite folder. - If you like a new image, try to generate one at http://www.ajaxload.info/
     * 
     * @public
     */		
	setWaitImage : function(newWaitImage)
	{
		this.waitImage = newWaitImage;
	}
	// }}}
	,
	// {{{ setCache()
    /**
     * Cancel selection when drag is in process
     *
     * @param Boolean enableCache = true if you want to enable cache, false otherwise(default is true). You can also send HTMl code in here, example an &lt;img> tag.
     * 
     * @public
     */		
	setCache : function(enableCache)
	{
		this.enableCache = enableCache;		
	}
	// }}}
	,
	// {{{ __ajax_showContent()
    /**
     * Evaluate Javascript in the inserted content
     *
     * @private
     */		
	__ajax_showContent :function(divId,ajaxIndex,url,functionToCallOnLoaded)
	{
		document.getElementById(divId).innerHTML = '';
		document.getElementById(divId).innerHTML = this.ajaxObjects[ajaxIndex].response;
		if(this.enableCache){	// Cache is enabled
			this.jsCache[url] = document.getElementById(divId).innerHTML + '';	// Put content into cache
		}	
		DHTMLSuite.commonObj.__evaluateJs(divId);	// Call private method which evaluates JS content
		DHTMLSuite.commonObj.__evaluateCss(divId);	// Call private method which evaluates JS content
		if(functionToCallOnLoaded)eval(functionToCallOnLoaded);
		this.ajaxObjects[ajaxIndex] = null;	// Clear sack object
		return false;
	}
	// }}}
	,
	// {{{ __ajax_displayError()
    /**
     * Display error message when the request failed.
     *
     * @private
     */		
	__ajax_displayError : function(divId,ajaxIndex,url,functionToCallOnLoaded)
	{
		document.getElementById(divId).innerHTML = '<h2>Message from DHTMLSuite.dynamicContent</h2><p>The ajax request for ' + url + ' failed</p>';		
	}
	// }}}		
}



/*[FILE_START:dhtmlSuite-modalMessage.js] */
/************************************************************************************************************
*	DHTML modal dialog box
*
*	Created:						August, 26th, 2006
*	@class Purpose of class:		Display a modal dialog box on the screen.
*			
*	Css files used by this script:	modal-message.css
*
*	Demos of this class:			demo-modal-message-1.html
*
* 	Update log:
*
************************************************************************************************************/


/**
* @constructor
* @class Purpose of class:	Display a modal DHTML message on the page. All other page controls will be disabled until the message is closed(<a href="../../demos/demo-modal-message-1.html" target="_blank">demo</a>).
* @param Array - Associative array of properties. These properties can also be set by calling invidiual set-methods. Possible keys in this array:<br>
*	url - Url to file displayed in the message
*	htmlOfModalMessage - Static HTML to display.
*   domRef - Reference to dom element. This dom element will be cloned and displayed inside the message box. You will typically set display:none or visibility:hidden on this element
*	width - Width of box
*	height - Height of box
*	cssClassOfMessageBox - Alternative css class for the message box
*	shadowOffset - Size of drop shadow in pixels
*   shadowDivVisible - Shadow visible (default = true)
*	isModal	- Is the dialog modal ? (default = true)
*
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
*/

DHTMLSuite.modalMessage = function(props)
{
	var url;								// url of modal message
	var htmlOfModalMessage;					// html of modal message
	var domRef;								// Reference to DOM element
	
	var divs_transparentDiv;				// Transparent div covering page content
	var divs_content;						// Modal message div.
	var iframeEl;						// Iframe element used to cover select boxes in ie
	var layoutCss;							// Name of css file;
	var width;								// Width of message box
	var height;								// Height of message box
	var isModal;							// Is the modal message modal ?
	
	var existingBodyOverFlowStyle;			// Existing body overflow css
	var dynContentObj;						// Reference to dynamic content object
	var cssClassOfMessageBox;				// Alternative css class of message box - in case you want a different appearance on one of them
	var shadowDivVisible;					// Shadow div visible ? 
	var shadowOffset; 						// X and Y offset of shadow(pixels from content box)
	
	var objectIndex;
	
		
	this.url = '';							// Default url is blank
	this.htmlOfModalMessage = '';			// Default message is blank
	this.layoutCss = 'modal-message.css';	// Default CSS file
	this.height = 200;						// Default height of modal message
	this.width = 400;						// Default width of modal message
	this.cssClassOfMessageBox = false;		// Default alternative css class for the message box
	this.shadowDivVisible = true;			// Shadow div is visible by default
	this.shadowOffset = 5;					// Default shadow offset.
	this.isModal = true;
	
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();	// This line starts all the init methods
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}

	this.objectIndex = DHTMLSuite.variableStorage.arrayDSObjects.length;
	DHTMLSuite.variableStorage.arrayDSObjects[this.objectIndex] = this;
	var ind = this.objectIndex;
	
	DHTMLSuite.commonObj.addEvent(window,"resize",function() { DHTMLSuite.variableStorage.arrayDSObjects[ind].__resizeTransparentDiv(); });	
	
	if(props)this.__setInitialProps(props);
}

DHTMLSuite.modalMessage.prototype = {
	// {{{ __setInitialProps
    /**
     *	Save properties sent to the constructor.
     * 	
     * @private	
     */		
	__setInitialProps : function(props)
	{
		if(props.url)this.setSource(props.url);
		if(props.htmlOfModalMessage)this.setHtmlContent(props.htmlOfModalMessage);
		if(props.domRef)this.setDomReference(props.domRef);
		if(props.width)this.width = props.width;
		if(props.height)this.height = props.height;
		if(props.cssClassOfMessageBox)this.cssClassOfMessageBox = props.cssClassOfMessageBox;
		if(props.shadowOffset)this.shadowOffset = props.shadowOffset;
		if(props.shadowDivVisible)this.shadowDivVisible = props.shadowDivVisible;
		if(props.isModal || props.isModal===false || props.isModal===0)this.isModal = props.isModal;
		if(props.waitMessage)this.setWaitMessage(waitMessage);		
	}
	// }}}
	,
	// {{{ setIsModal(urlOfSource)
    /**
     *	Specify if the box should be modal, i.e. a transparent div behind the box covering page content.
     * 	
     * @public	
     */		
	setIsModal : function(isModal)
	{
		this.isModal = isModal;
	}	
	// }}}
	,
	// {{{ setSource(urlOfSource)
    /**
     *	Set source of the modal dialog box
     * 	
     *
     * @public	
     */		
	setSource : function(urlOfSource)
	{
		if(urlOfSource)this.__clearProperties();
		this.url = urlOfSource;		
	}	
	// }}}	
	,
	// {{{ setHtmlContent(newHtmlContent)
    /**
     *	Setting static HTML content for the modal dialog box.
     * 	
     *	@param String newHtmlContent = Static HTML content of box
     *
     * @public	
     */		
	setHtmlContent : function(newHtmlContent)
	{
		if(newHtmlContent)this.__clearProperties();
		this.htmlOfModalMessage = newHtmlContent;		
	}
	// }}}
	,
	// {{{ setDomReference
    /**
     *	Specify reference to DOM element which will be displayed inside the modal message box.
     * 	
     *	@param Object domRef = Dom reference
     *
     * @public	
     */		
	setDomReference : function(domRef)
	{
		if(domRef)this.__clearProperties();
		if(domRef)domRef = DHTMLSuite.commonObj.getEl(domRef);
		if(domRef){
			domRef = domRef.cloneNode(true);
		}
		this.domRef = domRef;				
	}
	// }}}		
	,
	// {{{ setSize
    /**
     *	Set the size of the modal dialog box
     * 	
     *	@param int width = width of box
     *	@param int height = height of box
     *
     * @public	
     */		
	setSize : function(width,height)
	{
		if(width)this.width = width;
		if(height)this.height = height;		
	}
	// }}}		
	,		
	// {{{ setCssClassMessageBox(newCssClass)
    /**
     *	Assign the message box to a new css class.(in case you wants a different appearance on one of them)
     * 	
     *	@param String newCssClass = Name of new css class (Pass false if you want to change back to default)
     *
     * @public	
     */		
	setCssClassMessageBox : function(newCssClass)
	{
		this.cssClassOfMessageBox = newCssClass;
		if(this.divs_content){
			if(this.cssClassOfMessageBox)
				this.divs_content.className=this.cssClassOfMessageBox;
			else
				this.divs_content.className='modalDialog_contentDiv';	
		}
					
	}
	// }}}		
	,	
	// {{{ setShadowOffset(newShadowOffset)
    /**
     *	Specify the size of shadow
     * 	
     *	@param Int newShadowOffset = Offset of shadow div(in pixels from message box - x and y)
     *
     * @public	
     */		
	setShadowOffset : function(newShadowOffset)
	{
		this.shadowOffset = newShadowOffset
					
	}
	// }}}		
	,	
	// {{{ setWaitMessage(newMessage)
    /**
     *	Set a wait message when Ajax is busy inserting content
     * 	
     *	@param String newMessage = New wait message
     *
     * @public	
     */		
	setWaitMessage : function(newMessage)
	{
		if(!this.dynContentObj){
			try{
				this.dynContentObj = new DHTMLSuite.dynamicContent();	// Creating dynamic content object if it doesn't already exist.
			}catch(e){
				alert('You need to include dhtmlSuite-dynamicContent.js');
			}
		}	
		this.dynContentObj.setWaitMessage(newMessage);	// Calling the DHTMLSuite.dynamicContent setWaitMessage
	}
	// }}}		
	,	
	// {{{ setWaitImage(newImage)
    /**
     *	Set a wait Image when Ajax is busy inserting content
     * 	
     *	@param String newImage = New wait Image
     *
     * @public	
     */		
	setWaitImage : function(newImage)
	{
		if(!this.dynContentObj){
			try{
				this.dynContentObj = new DHTMLSuite.dynamicContent();	// Creating dynamic content object if it doesn't already exist.
			}catch(e){
				alert('You need to include dhtmlSuite-dynamicContent.js');
			}
		}	
		this.dynContentObj.setWaitImage(newImage);	// Calling the DHTMLSuite.dynamicContent setWaitImage
	}
	// }}}		
	,	
	// {{{ setCache()
    /**
     *	Enable or disable cache for the ajax object
     * 	
     *	@param Boolean cacheStatus = false = off, true = on
     *
     * @public	
     */		
	setCache : function(cacheStatus)
	{
		if(!this.dynContentObj){
			try{
				this.dynContentObj = new DHTMLSuite.dynamicContent();	// Creating dynamic content object if it doesn't already exist.
			}catch(e){
				alert('You need to include dhtmlSuite-dynamicContent.js');				
			}
		}	
		this.dynContentObj.setCache(cacheStatus);	// Calling the DHTMLSuite_dynamicContent setCache
		
	}
	// }}}		
	,
	// {{{ display()
    /**
     *	Display the modal dialog box
     * 	
     *
     * @public	
     */		
	display : function()
	{
		var ind = this.objectIndex;
		
		if(!this.divs_transparentDiv){
			DHTMLSuite.commonObj.loadCSS(this.layoutCss);
			this.__createDivElements();
		}
		this.__resizeAndPositionDivElements();
		// Redisplaying divs
		if(this.isModal){
			this.divs_transparentDiv.style.display='block';
		}else{
			this.divs_transparentDiv.style.display='none';
		}
		this.divs_content.style.display='block';
		this.divs_shadow.style.display='block';	
		
			
		if(this.iframeEl){
			setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].iframeEl.style.display="block"',150);
		}


					
		this.__resizeAndPositionDivElements();
		
		/* Call the __resizeAndPositionDivElements method twice in case the css file has changed. The first execution of this method may not catch these changes */
		window.refToThisModalBoxObj = this;		
		setTimeout('window.refToThisModalBoxObj.__resizeAndPositionDivElements()',100);
		
		this.__addHTMLContent();	// Calling method which inserts content into the message div.
	}
	// }}}		
	,
	// {{{ ()
    /**
     *	Display the modal dialog box
     * 	
     *
     * @public	
     */		
	setShadowDivVisible : function(visible)
	{
		this.shadowDivVisible = visible;
	}
	// }}}	
	,
	// {{{ close()
    /**
     *	Close the modal dialog box
     * 	
     *
     * @public	
     */		
	close : function()
	{
		document.documentElement.style.overflow = '';	// Setting the CSS overflow attribute of the <html> tag back to default.
		/* Hiding divs */
		this.divs_transparentDiv.style.display='none';
		this.divs_content.style.display='none';
		this.divs_shadow.style.display='none';
		if(this.iframeEl)this.iframeEl.style.display='none';
		
	}
	// }}}
	,
	// {{{ __clearProperties()
    /**
     *	Clear content properties
     * 	
     *
     * @private	
     */		
	__clearProperties : function()
	{
		if(this.domRef)DHTMLSuite.discardElement(this.domRef);
		this.domRef = null;
		this.url = false;
		this.htmlOfModalMessage = false;
	}
	// }}}	
	,
	// {{{ __createDivElements()
    /**
     *	Create the divs for the modal dialog box
     * 	
     *
     * @private	
     */		
	__createDivElements : function()
	{
		// Creating transparent div
		this.divs_transparentDiv = document.createElement('DIV');
		this.divs_transparentDiv.className='DHTMLSuite_modalDialog_transparentDivs';
		this.divs_transparentDiv.style.left = '0px';
		this.divs_transparentDiv.style.top = '0px';
		document.body.appendChild(this.divs_transparentDiv);
		// Creating content div
		if(!document.getElementById('DHTMLSuite_modalBox_contentDiv')){
			this.divs_content = document.createElement('DIV');
			this.divs_content.className = 'DHTMLSuite_modalDialog_contentDiv';
			this.divs_content.id = 'DHTMLSuite_modalBox_contentDiv';
			document.body.appendChild(this.divs_content);
		}else{
			this.divs_content = document.getElementById('DHTMLSuite_modalBox_contentDiv');
		}
		// Creating shadow div
		this.divs_shadow = document.createElement('DIV');
		this.divs_shadow.className = 'DHTMLSuite_modalDialog_contentDiv_shadow';
		document.body.appendChild(this.divs_shadow);

		
		
		if(DHTMLSuite.clientInfoObj.isMSIE){
			this.iframeEl = document.createElement('<iframe frameborder=0 src="about:blank" scrolling="no">');
			this.iframeEl.style.filter = 'alpha(opacity=0)';
			this.iframeEl.style.cssText = 'filter:alpha(opacity=0)';
			this.iframeEl.style.position = 'absolute';
			this.iframeEl.style.zIndex = 100001;
			this.iframeEl.style.display='none';
			this.iframeEl.style.left = '0px';
			this.iframeEl.style.top = '0px';
			document.body.appendChild(this.iframeEl);
		}
	}
	// }}}	
	,
	// {{{ __resizeAndPositionDivElements()
    /**
     *	Resize the message divs
     * 	
     *
     * @private	
     */	
    __resizeAndPositionDivElements : function()
    {
    	var topOffset = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
		if(this.cssClassOfMessageBox)
			this.divs_content.className=this.cssClassOfMessageBox;
		else
			this.divs_content.className='DHTMLSuite_modalDialog_contentDiv';	
    	if(!this.divs_transparentDiv)return;
    	
    	var bodyWidth = DHTMLSuite.clientInfoObj.getBrowserWidth();
    	var bodyHeight = DHTMLSuite.clientInfoObj.getBrowserHeight();
    	// Setting width and height of content div
      	this.divs_content.style.width = this.width + 'px';
    	this.divs_content.style.height= this.height + 'px';  	
    	
    	// Creating temporary width variables since the actual width of the content div could be larger than this.width and this.height(i.e. padding and border)
    	var tmpWidth = this.divs_content.offsetWidth;	
    	var tmpHeight = this.divs_content.offsetHeight;
    	
		
    	this.divs_content.style.left = Math.ceil((bodyWidth - tmpWidth) / 2) + 'px';;
    	this.divs_content.style.top = (Math.ceil((bodyHeight - tmpHeight) / 2) +  topOffset) + 'px';
    	this.divs_shadow.style.left = (this.divs_content.style.left.replace('px','')/1 + this.shadowOffset) + 'px';
    	this.divs_shadow.style.top = (this.divs_content.style.top.replace('px','')/1 + this.shadowOffset) + 'px';
    	this.divs_shadow.style.height = tmpHeight + 'px';
    	this.divs_shadow.style.width = tmpWidth + 'px';



			
    	if(!this.shadowDivVisible)this.divs_shadow.style.display='none';	// Hiding shadow if it has been disabled
    	this.__resizeTransparentDiv();
    	
    }	
    // }}}
    ,
   	// {{{ __resizeTransparentDiv()
    /**
     *	Resize transparent div
     * 	
     *
     * @private	
     */	 
    __resizeTransparentDiv : function()
    {
    	if(!this.divs_transparentDiv)return;
    	var divHeight = DHTMLSuite.clientInfoObj.getBrowserHeight();
    	var divWidth = DHTMLSuite.clientInfoObj.getBrowserWidth();
    	this.divs_transparentDiv.style.height = divHeight +'px';   
    	this.divs_transparentDiv.style.width = divWidth + 'px';
    	   	
		if(this.iframeEl){
			this.iframeEl.style.width = this.divs_transparentDiv.style.width;
			this.iframeEl.style.height = this.divs_transparentDiv.style.height;
		}
		    	
    	
    }
	// }}}	
	,
	// {{{ __addHTMLContent()
    /**
     *	Insert content into the content div
     * 	
     *
     * @private	
     */	
    __addHTMLContent : function()
    {
		if(!this.dynContentObj){// dynamic content object doesn't exists?
			try{
				this.dynContentObj = new DHTMLSuite.dynamicContent();	// Create new DHTMLSuite_dynamicContent object.
			}catch(e){
				alert('You need to include dhtmlSuite-dynamicContent.js');
			}
		}
		if(this.url){	// url specified - load content dynamically
			this.dynContentObj.loadContent('DHTMLSuite_modalBox_contentDiv',this.url);
		}
		if(this.htmlOfModalMessage){	// no url set, put static content inside the message box
			this.divs_content.innerHTML = this.htmlOfModalMessage;	
			
		}
	
		if(this.domRef){
			this.divs_content.innerHTML  = '';
			this.divs_content.appendChild(this.domRef);	
			var dis = DHTMLSuite.commonObj.getStyle(this.domRef,'display');
			if(dis=='none')this.domRef.style.display='block';
			this.domRef.style.visibility='visible';			
		}
    }		
}



/*[FILE_START:dhtmlSuite-dynamicTooltip.js] */
/************************************************************************************************************
*	DHTML dynamic tooltip script
*
*	Created:						August, 26th, 2006
*	@class Purpose of class:		Displays tooltips on screen with content from external files.
*			
*	Css files used by this script:	dynamic-tooltip.css
*
*	Demos of this class:			demo-dyn-tooltip-1.html
*
* 	Update log:
*
************************************************************************************************************/


/**
* @constructor
* @class Purpose of class:	Display a tooltip on screen with content from an external file(AJAX) (<a href="../../demos/demo-dyn-tooltip-1.html" target="_blank">Demo</a>)
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
*/

DHTMLSuite.dynamicTooltip = function()
{
	var x_offset_tooltip;					// X Offset tooltip
	var y_offset_tooltip;					// Y offset tooltip
	var ajax_tooltipObj;
	var ajax_tooltipObj_iframe;
	var dynContentObj;						// Reference to dynamic content object
	var layoutCss;
	var waitMessage;
	
	/* Offset position of tooltip */
	this.x_offset_tooltip = 5;
	this.y_offset_tooltip = 0;
	this.ajax_tooltipObj = false;
	this.ajax_tooltipObj_iframe = false;
	this.layoutCss = 'dynamic-tooltip.css';
	this.waitMessage = '';
	
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();	// This line starts all the init methods
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}
	
}

DHTMLSuite.dynamicTooltip.prototype = {
	// {{{ displayTooltip(externalFile,inputObj)
    /**
     *	Specify Ajax - please wait message
     * 	
     *	@param String waitMessage - New wait message
     *
     * @public	
     */		
	setWaitMessage : function(waitMessage)
	{
		this.waitMessage = waitMessage;			
	}
	,	
	// {{{ displayTooltip(externalFile,inputObj)
    /**
     *	Hides the tooltip - should be called in onmouseout events
     * 	
     *	@param String externalfile - Relative path to external file
     * 	@param Object inputObj - Reference to tag on webpage.(usually "this" in an onmouseover event)
     * 	@param String staticContent - Static text, alternative to externalFile
     *
     * @public	
     */	
	displayTooltip : function(externalFile,inputObj,staticContent)
	{
		DHTMLSuite.commonObj.loadCSS(this.layoutCss);
		if(!this.dynContentObj){
			try{
				this.dynContentObj = new DHTMLSuite.dynamicContent();	// Creating dynamic content object if it doesn't already exist.
				if(this.waitMessage)this.dynContentObj.setWaitMessage(this.waitMessage);
			}catch(e){
				alert('You need to include dhtmlSuite-dynamicContent.js');
			}
		}

		if(!this.ajax_tooltipObj && document.getElementById('DHTMLSuite_ajax_tooltipObj')){
			DHTMLSuite.discardElement('DHTMLSuite_ajax_tooltipObj');
		}	
		
		if(!this.ajax_tooltipObj)	/* Tooltip div not created yet ? */
		{
		
			this.ajax_tooltipObj = document.createElement('DIV');
			this.ajax_tooltipObj.style.position = 'absolute';
			this.ajax_tooltipObj.id = 'DHTMLSuite_ajax_tooltipObj';		
			document.body.appendChild(this.ajax_tooltipObj);
	
			
			var leftDiv = document.createElement('DIV');	/* Create arrow div */
			leftDiv.className='DHTMLSuite_ajax_tooltip_arrow';
			leftDiv.id = 'DHTMLSuite_ajax_tooltip_arrow';
			leftDiv.style.backgroundImage = 'url(\'' +  DHTMLSuite.configObj.imagePath + 'dynamic-tooltip/dyn-tooltip-arrow.gif' + '\')';
			this.ajax_tooltipObj.appendChild(leftDiv);
			
			var contentDiv = document.createElement('DIV'); /* Create tooltip content div */
			contentDiv.className = 'DHTMLSuite_ajax_tooltip_content';
			this.ajax_tooltipObj.appendChild(contentDiv);
			contentDiv.id = 'DHTMLSuite_ajax_tooltip_content';
			
			if(DHTMLSuite.clientInfoObj.isMSIE){	/* Create iframe object for MSIE in order to make the tooltip cover select boxes */
				this.ajax_tooltipObj_iframe = document.createElement('<IFRAME frameborder="0">');
				var fr = this.ajax_tooltipObj_iframe;
				fr.style.position = 'absolute';
				fr.id='DHTMLSuite_ajax_tooltipObjIframe';
				fr.border='0';
				fr.frameborder=0;
				fr.style.backgroundColor='#FFF';
				fr.src = 'about:blank';
				contentDiv.appendChild(fr);
				fr.style.left = '0px';
				fr.style.top = '0px';
			}
	
				
		}
		// Find position of tooltip
		this.ajax_tooltipObj.style.display='block';
		if(externalFile){
			this.dynContentObj.loadContent('DHTMLSuite_ajax_tooltip_content',externalFile);
		}else{
			this.ajax_tooltipObj.innerHTML = staticContent;
		}
		if(DHTMLSuite.clientInfoObj.isMSIE){
			this.ajax_tooltipObj_iframe.style.width = this.ajax_tooltipObj.clientWidth + 'px';
			this.ajax_tooltipObj_iframe.style.height = this.ajax_tooltipObj.clientHeight + 'px';
		}
	
		this.__positionTooltip(inputObj);
	}	
	// }}}	
	,
	// {{{ setLayoutCss(newCssFileName)
    /**
     *	Set new CSS file name
     *
     *	@param String newCssFileName - name of new css file. Should be called before any tooltips are displayed on the screen.	
     *
     * @public	
     */	
	setLayoutCss : function(newCssFileName)
	{
		this.layoutCss = newCssFileName;
	}	
	// }}}		
	,
	// {{{ hideTooltip()
    /**
     *	Hides the tooltip - should be called in onmouseout events
     * 	
     *
     * @public	
     */	
	hideTooltip : function()
	{
		this.ajax_tooltipObj.style.display='none';
	}	
	// }}}	
	,
	// {{{ __positionTooltip()
    /**
     *	Positions the tooltip
     * 	
     *	@param Object inputobject = Reference to element on web page. Used when the script determines where to place the tooltip
     *
     * @private	
     */	
	__positionTooltip : function(inputObj)
	{
		var leftPos = (DHTMLSuite.commonObj.getLeftPos(inputObj) + inputObj.offsetWidth);
		var topPos = DHTMLSuite.commonObj.getTopPos(inputObj);
		var tooltipWidth = document.getElementById('DHTMLSuite_ajax_tooltip_content').offsetWidth +  document.getElementById('DHTMLSuite_ajax_tooltip_arrow').offsetWidth; 
		
		this.ajax_tooltipObj.style.left = leftPos + 'px';
		this.ajax_tooltipObj.style.top = topPos + 'px';		
	}	
	
	
}
/*[FILE_START:dhtmlSuite-infoPanel.js] */
/************************************************************************************************************
*	DHTML dynamic tooltip script
*
*	Created:						September, 26th, 2006
*	@class Purpose of class:		Transforms a regular div into a expandable info pane.
*			
*	Css files used by this script:	info-pane.css
*
*	Demos of this class:			demo-info-pane-1.html
*
* 	Update log:
*
************************************************************************************************************/


/**
* @constructor
* @class Purpose of class:	Transforms a regular div into a expandable info pane. (<a href="../../demos/demo-info-pane-1.html" target="_blank">Demo</a>)
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
*/

	
DHTMLSuite.infoPanel = function()
{
	
	var xpPanel_slideActive;			// Slide down/up active?
	var xpPanel_slideSpeed ;			// Speed of slide
	var xpPanel_onlyOneExpandedPane;	// Only one pane expanded at a time ?	
	var savedActivePane;
	var savedActiveSub;
	var xpPanel_currentDirection;	
	var cookieNames;
	var layoutCSS;
	var arrayOfPanes;
	var dynamicContentObj;
	var paneHeights;					// Array of info pane heights.
	
	var currentlyExpandedPane = false;
	this.xpPanel_slideActive = true;	// Slide down/up active?
	this.xpPanel_slideSpeed = 20;	// Speed of slide
	this.xpPanel_onlyOneExpandedPane = false;	// Only one pane expanded at a time ?	
	this.savedActivePane = false;
	this.savedActiveSub = false;
	this.xpPanel_currentDirection = new Object();	
	this.cookieNames = new Array();	
	this.currentlyExpandedPane = false;
	this.layoutCSS = 'info-pane.css';	// Default css file for this widget.
	this.arrayOfPanes = new Array();
	this.paneHeights = new Object();
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();	// This line starts all the init methods
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}
	try{
		this.dynamicContentObj = new DHTMLSuite.dynamicContent();
	}catch(e){
		alert('You need to include dhtmlSuite-dynamicContent.js');
	}
			
	
		
		
	
}

	
	
DHTMLSuite.infoPanel.prototype = {	
	// {{{ addPane()
    /**
     *	Define a pane.
     * 	
     *	@param String idOfPane = Id of the element you want to transfor into a info pane
     *  @param String labelOfPane = The label you want to set for this pane
     *  @param Boolean State = Initial state of pane, expanded or collapsed(true = Expanded, false = collapsed)
     *  @param nameOfCookie = Name of cookie for this pane, i.e. saving states
     *  @param Int width = Width of pane(Optional)
     *
     * @public	
     */		
	addPane : function(idOfPane,labelOfPane,state,nameOfCookie,width)
	{
		var index = this.arrayOfPanes.length;
		this.arrayOfPanes[index] = [idOfPane,labelOfPane,state,nameOfCookie,width];
	}
	// }}}	
	,
	// {{{ addContentToPane()
    /**
     *	Replace content inside a pane with content from an external file.
     * 	
     *	@param String idOfPane = Id of the element you want to transfor into a info pane
     *  @param String pathToExternalFile = Relative path to file. The content of this file will be placed inside the info pane.
     *
     * @public	
     */		
	addContentToPane : function(idOfPane,pathToExternalFile)
	{
		var obj = document.getElementById(idOfPane);
		var subDivs = obj.getElementsByTagName('DIV');
		for(var no=0;no<subDivs.length;no++){
			if(subDivs[no].className=='DHTMLSuite_infoPaneContent'){
				window.refToThisPane = this;		
				this.__slidePane(this.xpPanel_slideSpeed,subDivs[no].id);			
				this.dynamicContentObj.loadContent(subDivs[no].id,pathToExternalFile,"window.refToThisPane.__resizeAndRepositionPane('" + idOfPane + "')");					
				if(subDivs[no].parentNode.style.display=='none' || subDivs[no].parentNode.style.height=='0px'){	// Pane is collapsed, expand it
					var topBarObj = DHTMLSuite.domQueryObj.getElementsByClassName('DHTMLSuite_infoPaneTopBar',subDivs[no].parentNode.parentNode);
					this.__showHidePaneContent(topBarObj[0]);
				}	
				return;	
			}		
		}
	}
	// }}}	
	,
	// {{{ addStaticContentToPane()
    /**
     *	Replace content inside a pane with some new static content.
     * 	
     *	@param String idOfPane = Id of the element you want to transfor into a info pane
     *  @param String newContent = New content. (Static html).
     *
     * @public	
     */		
	addStaticContentToPane : function(idOfPane,newContent)
	{
		var obj = document.getElementById(idOfPane);
		var subDivs = obj.getElementsByTagName('DIV');
		for(var no=0;no<subDivs.length;no++){
			if(subDivs[no].className=='DHTMLSuite_infoPaneContent'){			
				window.refToThisPane = this;		
				this.__slidePane(this.xpPanel_slideSpeed,subDivs[no].id);			
				subDivs[no].innerHTML = newContent;						
				if(subDivs[no].parentNode.style.display=='none' || subDivs[no].parentNode.style.height=='0px'){	// Pane is collapsed, expand it
					var topBarObj = DHTMLSuite.domQueryObj.getElementsByClassName('DHTMLSuite_infoPaneTopBar',subDivs[no].parentNode.parentNode);
					this.__showHidePaneContent(topBarObj[0]);
				}	
				this.__resizeAndRepositionPane(idOfPane);
				return;		
			}		
		}
	}
	// }}}	
	,	
	// {{{ init()
    /**
     *	Initializes the script. This method should be called after you have added all your panes.
     * 	
     *	@param Object inputobject = Reference to element on web page.
     *
     * @public	
     */	
	init : function()
	{
		DHTMLSuite.commonObj.loadCSS(this.layoutCSS);
		
		for(var no=0;no<this.arrayOfPanes.length;no++){		// Loop through panes	
			var tmpDiv = document.getElementById(this.arrayOfPanes[no][0]);	// Creating reference to pane div.
			tmpDiv.className = 'DHTMLSuite_panel';	// Assigning it to class DHTMLSuite_panel
			var panelTitle = this.arrayOfPanes[no][1];	
			var panelDisplayed = this.arrayOfPanes[no][2];
			var nameOfCookie = this.arrayOfPanes[no][3];
			var widthOfPane = this.arrayOfPanes[no][4];
					
			if(widthOfPane)tmpDiv.style.width = widthOfPane;
			
			var outerContentDiv = document.createElement('DIV');	
			var contentDiv = tmpDiv.getElementsByTagName('DIV')[0];
			contentDiv.className = 'DHTMLSuite_infoPaneContent';
			contentDiv.id = 'infoPaneContent' + no;
			outerContentDiv.appendChild(contentDiv);	
			this.cookieNames[this.cookieNames.length] = nameOfCookie;
			
			outerContentDiv.id = 'paneContent' + no;
			outerContentDiv.className = 'DHTMLSuite_panelContent';
			outerContentDiv.style.backgroundImage = 'url(\'' + DHTMLSuite.configObj.imagePath + 'info-pane/xp-info-pane-bg_pane_right.gif' + '\')';			
			
			var topBar = document.createElement('DIV');
			topBar.onselectstart = function() { return false; };
			topBar.className = 'DHTMLSuite_infoPane_topBar';
			topBar.style.position='relative';
			
			DHTMLSuite.commonObj.__addEventEl(topBar);
			var span = document.createElement('SPAN');				
			span.innerHTML = panelTitle;
			topBar.appendChild(span);
			topBar.style.backgroundImage = 'url(\'' + DHTMLSuite.configObj.imagePath + 'info-pane/xp-info-pane-bg_panel_top_right.gif' + '\')';
			window.refToXpPane = this;
			topBar.onclick = function(){ window.refToXpPane.__showHidePaneContent(this) };
			if(document.all)topBar.ondblclick = function(){ window.refToXpPane.__showHidePaneContent(this) };;
			topBar.onmouseover = this.__mouseoverTopbar;	// Adding mouseover effect to heading
			topBar.onmouseout = this.__mouseoutTopbar;	// Adding mouseout effect to heading
			topBar.style.position = 'relative';	// Relative positioning of heading

			
			
			var btnDiv = document.createElement('DIV');
			btnDiv.className = 'DHTMLSuite_infoPane_topBar_button';
			topBar.appendChild(btnDiv);
			
			if(nameOfCookie){	// Cookie defined?
				cookieValue =  DHTMLSuite.commonObj.getCookie(nameOfCookie);	
				if(cookieValue)panelDisplayed = cookieValue==1?true:false; // Cookie value exists? -> Expand or collapse pane.
				
			}
			
			if(!panelDisplayed){	// Hide pane initially.
				outerContentDiv.style.height = '0px';
				contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
				if(document.all)outerContentDiv.style.display='none';
				btnDiv.className = btnDiv.className + ' DHTMLSuite_infoPane_topBar_buttonDown';
			}
							
			topBar.className='DHTMLSuite_infoPaneTopBar';
			topBar.id = 'infoPane_topBar' + no;
			tmpDiv.appendChild(topBar);				
			tmpDiv.appendChild(outerContentDiv);	
		}
	}		
	// }}}			
	,	
	// {{{ __resizeAndRepositionPane()
    /**
     *	Fixes the layout of a pane after content has been added to it dynamically.
     * 	
     *	@param String idOfPane = Id of the pane
     *
     * @private	
     */		
	__resizeAndRepositionPane : function(idOfPane)
	{
		var obj = document.getElementById(idOfPane);
		var subDivs = obj.getElementsByTagName('DIV');
		for(var no=0;no<subDivs.length;no++){
			if(subDivs[no].className=='DHTMLSuite_panelContent'){	
				subDivs[no].style.overflow = 'auto';	
				subDivs[no].style.height = '';		
				var contentDiv = subDivs[no].getElementsByTagName('DIV')[0];				
				var tmpHeight = subDivs[no].clientHeight;
				tmpHeight = subDivs[no].offsetHeight;				
				subDivs[no].style.height = tmpHeight + 'px';
				if(tmpHeight)this.paneHeights[subDivs[no].id] = tmpHeight;
				subDivs[no].style.top = '0px';
				subDivs[no].style.overflow = 'hidden';
				var subSub = subDivs[no].getElementsByTagName('DIV')[0];
				subSub.style.top = '0px';
			}		
		}
	}
	// }}}	
	,	
	// {{{ __showHidePaneContent()
    /**
     *	Expand or collapse a frame
     * 	
     *	@param Object inputobject = Reference to element on web page.
     *	@param String methodWhenFinished = Method to execute when slide is finished(optional)
     *
     * @private	
     */	
	__showHidePaneContent : function(inputObj,methodWhenFinished)
	{
		var div = inputObj.getElementsByTagName('div')[0];
		var numericId = inputObj.id.replace(/[^0-9]/g,'');
		var obj = document.getElementById('paneContent' + numericId);
		
		if(div.className.indexOf('DHTMLSuite_infoPane_topBar_buttonDown')==-1){
			this.currentlyExpandedPane = false;
			div.className = div.className + ' DHTMLSuite_infoPane_topBar_buttonDown';
			if(this.xpPanel_slideActive){
				obj.style.display='block';
				this.xpPanel_currentDirection[obj.id] = (this.xpPanel_slideSpeed*-1);
				this.__slidePane((this.xpPanel_slideSpeed*-1), obj.id,methodWhenFinished);
			}else{
				obj.style.display='none';
			}
			if(this.cookieNames[numericId])DHTMLSuite.commonObj.setCookie(this.cookieNames[numericId],'0',100000);
		}else{
			if(inputObj){
				if(this.currentlyExpandedPane && this.xpPanel_onlyOneExpandedPane)this.__showHidePaneContent(this.currentlyExpandedPane);
				this.currentlyExpandedPane = inputObj;	
			}
			div.className = div.className.replace(' DHTMLSuite_infoPane_topBar_buttonDown','');
			
			if(this.xpPanel_slideActive){
				if(document.all){
					obj.style.display='block';
				}
				this.xpPanel_currentDirection[obj.id] = this.xpPanel_slideSpeed;
				this.__slidePane(this.xpPanel_slideSpeed,obj.id,methodWhenFinished);
			}else{
				obj.style.display='block';
				subDiv = obj.getElementsByTagName('DIV')[0];
				obj.style.height = subDiv.offsetHeight + 'px';
			}
			if(this.cookieNames[numericId])DHTMLSuite.commonObj.setCookie(this.cookieNames[numericId],'1',100000);
		}	
		return true;	
	}
	// }}}	
	,	
	// {{{ __slidePane()
    /**
     *	Animating expand/collapse
     * 	
     *	@param Int slideValue = Positive or negative value, positive when expanding, negative when collapsing
     *  @param String id = Id of the pane currently being expanded/collapsed.
     *	@param String methodWhenFinished = Method to execute when slide is finished(optional)
     *
     * @private	
     */		
	__slidePane : function(slideValue,id,methodWhenFinished)
	{
		if(slideValue!=this.xpPanel_currentDirection[id]){
			return false;
		}
		var activePane = document.getElementById(id);
		if(activePane==this.savedActivePane){
			var subDiv = this.savedActiveSub;
		}else{
			var subDiv = activePane.getElementsByTagName('DIV')[0];
		}
		this.savedActivePane = activePane;
		this.savedActiveSub = subDiv;
		
		var height = activePane.offsetHeight;
		var innerHeight = subDiv.offsetHeight;
		if(this.paneHeights[activePane.id])innerHeight = this.paneHeights[activePane.id];
		height+=slideValue;
		if(height<0)height=0;
		if(height>innerHeight)height = innerHeight;
		
		if(document.all){
			activePane.style.filter = 'alpha(opacity=' + Math.round((height / innerHeight)*100) + ')';
		}else{
			var opacity = (height / innerHeight);
			if(opacity==0)opacity=0.01;
			if(opacity==1)opacity = 0.99;
			activePane.style.opacity = opacity;
		}			
		window.refToThisInfoPane = this;
		if(slideValue<0){			
			activePane.style.height = height + 'px';
			subDiv.style.top = height - innerHeight + 'px';
			if(height>0){
				setTimeout('window.refToThisInfoPane.__slidePane(' + slideValue + ',"' + id + '","' + methodWhenFinished + '")',10);
			}else{
				if(document.all)activePane.style.display='none';
				if(methodWhenFinished)eval(methodWhenFinished);
			}
		}else{			
			subDiv.style.top = height - innerHeight + 'px';
			activePane.style.height = height + 'px';
			if(height<innerHeight){				
				setTimeout('window.refToThisInfoPane.__slidePane(' + slideValue + ',"' + id + '","' + methodWhenFinished + '")',10);				
			}else{
				if(methodWhenFinished)eval(methodWhenFinished);
			}		
		}		
	}
	,
	// {{{ __mouseoverTopbar()
    /**
     *	Toolbar mouse over effect.
     * 	
     *
     * @private	
     */			
	__mouseoverTopbar : function()
	{
		var div = this.getElementsByTagName('DIV')[0];
		div.className = div.className + ' DHTMLSuite_infoPaneButton_over';
		
		var span = this.getElementsByTagName('SPAN')[0];
		span.className = 'DHTMLSuite_infoPanelOver';	
		
	}
	// }}}	
	,
	// {{{ __mouseoutTopbar()
    /**
     *	Toolbar mouse out effect.
     * 	
     *
     * @private	
     */			
	__mouseoutTopbar : function()
	{
		var div = this.getElementsByTagName('DIV')[0];
		div.className = div.className.replace(' DHTMLSuite_infoPaneButton_over','');	
		
		var span = this.getElementsByTagName('SPAN')[0];
		span.className='';
	}
}




/*[FILE_START:dhtmlSuite-contextMenu.js] */
/************************************************************************************************************
*	DHTML context menu class
*
*	Created:						November, 4th, 2006
*	@class Purpose of class:		Creates a context menu
*			
*	Css files used by this script:	context-menu.css
*
*	Demos of this class:			demo-context-menu.html
*
* 	Update log:
*
************************************************************************************************************/
/**
* @constructor
* @class Purpose of class:	Creates a context menu. (<a href="../../demos/demo-context-menu.html" target="_blank">Demo</a>)
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
*/

var referenceToDHTMLSuiteContextMenu;


DHTMLSuite.contextMenu = function()
{
	var menuModels;
	var defaultMenuModel;
	var menuItems;	
	var menuObject;			// Reference to context menu div
	var layoutCSS;
	var menuUls;			// Array of <ul> elements
	var width;				// Width of context menu
	var srcElement;			// Reference to the element which triggered the context menu, i.e. the element which caused the context menu to be displayed.
	var indexCurrentlyDisplayedMenuModel;	// Index of currently displayed menu model.
	var menuBar;	
	this.menuModels = new Object();
	this.menuObject = false;
	this.menuUls = new Array();
	this.width = 100;
	this.srcElement = false;
	this.indexCurrentlyDisplayedMenuModel = false;
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}
	var objectIndex;
	this.objectIndex = DHTMLSuite.variableStorage.arrayDSObjects.length;
	DHTMLSuite.variableStorage.arrayDSObjects[this.objectIndex] = this;	
}

DHTMLSuite.contextMenu.prototype = 
{
	// {{{ setWidth()
    /**
     *	Set width of context menu
     *
     *  @param Integer newWidth - Width of context menu
     *
     * @public	
     */		
	setWidth : function(newWidth)
	{
		this.width = newWidth;
	}
	// }}}
	,	
	// {{{ setLayoutCss()
    /**
     *	Add menu items
     *	@deprecated
     *  @param String cssFileName Name of css file 	
     *
     * @private	
     */		
	setLayoutCss : function(cssFileName)
	{
		// this.layoutCSS = cssFileName;	
	}	
	// }}}	
	,	
	// {{{ attachToElement()
    /**
     *  @deprecated
     *	Add menu items
     *
     *  @param Object HTML Element = Reference to html element
     *  @param String elementId = String id of element(optional). An alternative to HTML Element	
     *  @param DHTMLSuite.menuModel menuModel = Menu model to use on this HTML element	
     *
     * @private	
     */		
	attachToElement : function(element,elementId,menuModel)
	{
		window.refToThisContextMenu = this;
		if(!element && elementId)element = document.getElementById(elementId);
		if(!element.id){
			element.id = 'context_menu' + Math.random();
			element.id = element.id.replace('.','');
		}
		this.menuModels[element.id] = menuModel;
		menuModel.setSubMenuType(1,'sub');
		menuModel.setMainMenuGroupWidth(this.width);	
		if(!this.defaultMenuModel)this.defaultMenuModel = menuModel;
		element.oncontextmenu = this.__displayContextMenu;
		element.onmousedown = function() { window.refToThisContextMenu.__setReference(window.refToThisContextMenu); };
		DHTMLSuite.commonObj.__addEventEl(element)
		DHTMLSuite.commonObj.addEvent(document.documentElement,"click",this.__hideContextMenu);		
	}	
	// }}}
	,
	// {{{ attachTo()
    /**
     *	Add menu items
     *
     *  @param Object HTML Element = Reference to html element
     *  @param DHTMLSuite.menuModel menuModel = Menu model to use on this HTML element	
     *
     * @public	
     */		
    attachTo : function(el,menuModel)
    {
    	el = DHTMLSuite.commonObj.getEl(el);
    	this.attachToElement(el,false,menuModel);	
    }    
	// }}}
	,
	// {{{ __setReference()
    /**
     *	Creates a reference to current context menu object. (Note: This method should be deprecated as only one context menu object is needed)
     *
     *  @param Object context menu object = Reference to context menu object
     *
     * @private	
     */		
	__setReference : function(obj)
	{	
		referenceToDHTMLSuiteContextMenu = obj;	
	}
	,
	// {{{ __displayContextMenu()
    /**
     *	Displays the context menu
     *
     *  @param Event e
     *
     * @private	
     */		
	__displayContextMenu : function(e)
	{
		if(document.all)e = event;		

		var ref = referenceToDHTMLSuiteContextMenu;
		if(ref.isContextMenuBusy)return;
		ref.isContextMenuBusy = true;
				
		ref.srcElement = DHTMLSuite.commonObj.getSrcElement(e);
		
		if(!ref.indexCurrentlyDisplayedMenuModel || ref.indexCurrentlyDisplayedMenuModel!=this.id){			
			if(ref.indexCurrentlyDisplayedMenuModel){
				ref.menuObject.innerHTML = '';				
			}else{
				ref.__createDivs();
			}
			ref.menuItems = ref.menuModels[this.id].getItems();			
			ref.__createMenuItems(ref.menuModels[this.id]);	
		}
		ref.indexCurrentlyDisplayedMenuModel=this.id;
		
		ref.menuObject.style.left = (e.clientX + Math.max(document.body.scrollLeft,document.documentElement.scrollLeft)) + 'px';
		ref.menuObject.style.top = (e.clientY + Math.max(document.body.scrollTop,document.documentElement.scrollTop)) + 'px';
		ref.menuObject.style.display='block';
		
		
		
		setTimeout('referenceToDHTMLSuiteContextMenu.isContextMenuBusy=false',20);
		return false;
			
	}
	// }}}
	,
	// {{{ __displayContextMenu()
    /**
     *	Add menu items
     *
     *  @param Event e
     *
     * @private	
     */		
	__hideContextMenu : function()
	{
		var ref = referenceToDHTMLSuiteContextMenu;
		if(!ref)return;
		if(ref.menuObject)ref.menuObject.style.display = 'none';
		
		
	}
	// }}}
	,
	// {{{ __createDivs()
    /**
     *	Creates general divs for the menu
     *
     *
     * @private	
     */		
	__createDivs : function()
	{
		var firstChild = false;
		var firstChilds = document.getElementsByTagName('DIV');
		if(firstChilds.length>0)firstChild = firstChilds[0];
		this.menuObject = document.createElement('DIV');
		this.menuObject.style.cssText = 'position:absolute;z-index:100000;';
		this.menuObject.className = 'DHTMLSuite_contextMenu';
		this.menuObject.id = 'DHTMLSuite_contextMenu' + DHTMLSuite.commonObj.getUniqueId();
		this.menuObject.style.backgroundImage = 'url(\'' + DHTMLSuite.configObj.imagePath + 'context-menu/context-menu-gradient.gif' + '\')';
		this.menuObject.style.backgroundRepeat = 'repeat-y';
		if(this.width)this.menuObject.style.width = this.width + 'px';
		
		if(firstChild){
			firstChild.parentNode.insertBefore(this.menuObject,firstChild);
		}else{
			document.body.appendChild(this.menuObject);
		}
						
		
		this.menuBar = new DHTMLSuite.menuBar();
		this.menuBar.setActiveSubItemsOnMouseOver(true);
		this.menuBar.setTarget(this.menuObject.id);	
		this.menuBar.addMenuItems(this.defaultMenuModel);		
		this.menuBar.init();
	}
	// }}}
	,
	
	// {{{ __mouseOver()
    /**
     *	Display mouse over effect when moving the mouse over a menu item
     *
     *
     * @private	
     */		
	__mouseOver : function()
	{
		this.className = 'DHTMLSuite_item_mouseover';	
		if(!document.all){
			this.style.backgroundPosition = 'left center';
		}
									
	}
	// }}}
	,
	// {{{ __mouseOut()
    /**
     *	Remove mouse over effect when moving the mouse away from a menu item
     *
     *
     * @private	
     */		
	__mouseOut : function()
	{
		this.className = '';
		if(!document.all){
			this.style.backgroundPosition = '1px center';
		}		
	}
	// }}}
	,
	// {{{ __createMenuItems()
    /**
     *	Create menu items
     *
     *
     * @private	
     */		
	__createMenuItems : function(menuModel)
	{		
		this.menuBar.deleteAllMenuItems();			
		this.menuBar.addMenuItems(menuModel);
		this.menuBar.init();
	}	
}

/*[FILE_START:dhtmlSuite-mediaModel.js] */
/************************************************************************************************************
*	DHTML context menu class
*
*	Created:						January, 7th, 2007
*	@class Purpose of class:		Data sources for image gallery scripts
*			
*
*
* 	Update log:
*
************************************************************************************************************/
/**
* @constructor
* @class Purpose of class:	Creates a image object - store data about an image.
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
*/

DHTMLSuite.mediaModel = function(inputArray)
{
	var id;
	var thumbnailPathSmall;
	var thumbnailPath;
	var largeImagePath;
	var title;
	var caption;	
	
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}
	
	if(inputArray)this.addItem(inputArray);
}

DHTMLSuite.mediaModel.prototype = 
{
	// {{{ addItem()
    /**
     *	Display image
     *
     *	@param Array mediaProperties - associative array of properties. keys: id, thumbnailPath, thumnbailPath_small,largeImagePath,title,caption
     *
     * @public	
     */		
	addItem : function(inputArray)
	{
		this.id = inputArray['id'];
		if(inputArray['thumbnailPathSmall'])this.thumbnailPathSmall = inputArray['thumbnailPathSmall'];
		if(inputArray['thumbnailPath'])this.thumbnailPath = inputArray['thumbnailPath'];
		if(inputArray['largeImagePath'])this.largeImagePath = inputArray['largeImagePath'];
		if(inputArray['title'])this.title = inputArray['title'];
		if(inputArray['caption'])this.caption = inputArray['caption'];
	}	
}

DHTMLSuite.mediaCollection = function()
{
	var mediaObjects;		// Array of DHTMLSuite.mediaModel objects
	this.mediaObjects = new Array();
}

DHTMLSuite.mediaCollection.prototype = {
	
	// {{{ addItemsFromMarkup()
    /**
     *	Create image objects from HTML markup(UL,LI) list on the page
     *	The ul element will be hidden by this method.
     *	
     *	@param String elementId - Reference to UL tag on the page
     *
     * @public	
     */		
	addItemsFromMarkup : function(elementId)
	{
		var ul = document.getElementById(elementId);
		var lis = ul.getElementsByTagName('LI');
		for(var no=0;no<lis.length;no++){
			
			var img = lis[no].getElementsByTagName('IMG')[0];
			var index = this.mediaObjects.length;	
			
			var mediaArray = new Object();
			mediaArray.id = lis[no].id;
			if(img){
				mediaArray.thumbnailPath = img.src;	

			}
			mediaArray.title = lis[no].title;
			mediaArray.caption = lis[no].getAttribute('caption');	
			mediaArray.largeImagePath = lis[no].getAttribute('largeImagePath');		
			mediaArray.thumbnailPathSmall = lis[no].getAttribute('thumbnailPathSmall');		
			this.mediaObjects[index] = new DHTMLSuite.mediaModel(mediaArray);
			
		}	
		DHTMLSuite.discardElement(ul);
	}
	// }}}
	,
	// {{{ __removeImage()
    /**
     *	Remove an image from the gallery
     *	
     *	@param String idOfMedia - Id of image
     *
     * @private	
     */			
	__removeImage : function(idOfMedia)
	{
		for(var no=0;no<this.mediaObjects.length;no++){
			if(this.mediaObjects[no].id==idOfMedia){
				var retVal = this.mediaObjects[no].id;
				this.mediaObjects.splice(no,1);
				return retVal;
			}
		}	
		return false;	
	}
	// }}}
	,
	// {{{ getMediaById()
    /**
     *	Return reference to media by id
     *	
     *	@param String idOfMedia - Id of image
     *
     * @public	
     */		
	getMediaById : function(idOfMedia)
	{
		for(var no=0;no<this.mediaObjects.length;no++){
			if(this.mediaObjects[no].id==idOfMedia){
				return this.mediaObjects[no];
			}
		}	
		return false;			
		
	}
	
}

/*[FILE_START:dhtmlSuite-floatingGallery.js] */
/************************************************************************************************************
*	DHTML context menu class
*
*	Created:						January, 12th, 2007
*	@class Purpose of class:		Floating gallery widget
*			
*
*
* 	Update log:
*
************************************************************************************************************/
/**
* @constructor
* @class Purpose of class:	Creates a floating gallery widget.(<a href="../../demos/demo-image-gallery-1.html" target="_blank">Demo</a>)
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
*/

DHTMLSuite.floatingGallery = function()
{
	var collectionModel;		// Reference to an object of class DHTMLSuite.mediaCollection	
	var layoutCSS;
	var divElement;				// Reference to parent div element.
	var divElementImageBoxes;	// Array of div elements for the images	
	var idOfParentElementToGallery;	// Id of parent element
	
	// Strings - callback functions.
	var callBackFunction_onClick;			// Call back on click
	var callBackFunction_onDblClick;		// Call back on dbl click
	var callBackFunction_onMouseOver;		// Call back on mouse over
	var callBackFunction_onMouseMove;		// Call back mouse move
	
	var imageSelectionObj;					// Object of class DHTMLSuite.imageSelection
	var objectIndex;
	
	this.layoutCSS = 'floating-gallery.css';	
	this.divElementImageBoxes = new Array();
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}
	
	this.objectIndex = DHTMLSuite.variableStorage.arrayDSObjects.length;
	DHTMLSuite.variableStorage.arrayDSObjects[this.objectIndex] = this;	
		
}

DHTMLSuite.floatingGallery.prototype = 
{
	// {{{ setMediaCollectionRef()
    /**
     *	Specify reference to DHTMLSuite.mediaCollection
     *
     *	@param Object mediaCollectionRef -Object of class DHTMLSuite.mediaCollection
     *
     * @public	
     */		
	setMediaCollectionRef : function(mediaCollectionRef)
	{
		this.collectionModel = mediaCollectionRef;
	}	
	,
	// {{{ init()
    /**
     *	Initializes the widget
     *
     *
     * @public	
     */			
	init : function()
	{
		try{
			DHTMLSuite.commonObj.loadCSS(this.layoutCSS);	
		}catch(e){
			alert('loadCSS method missing. You need to include dhtmlSuite-common.js');
		}
		this.__createMainDivEl();
		this.__createImageBoxes();	
		this.__initiallyHandleimageSelection();
	}
	// }}}
	,
	// {{{ setTargetId()
    /**
     *	Specify id of element where the gallery will be placed inside.
     *
     *	@param idOfParentElementToGallery - ID of HTML element - this widget will be inserted as child element.
     *
     * @public	
     */		
	setTargetId : function(idOfParentElementToGallery)
	{
		this.idOfParentElementToGallery = idOfParentElementToGallery;
	}
	// }}}
	,
	// {{{ setCallBackFunctionOnClick()
    /**
     *	Specify function to call when users clicks on an image
     *
     *	@param functionName - only the name of the image. an image object(DHTMLSuite.mediaModel) will be sent to this function(representing the image clicked on).
     *
     * @public	
     */		
	setCallBackFunctionOnClick : function(functionName)
	{
		this.callBackFunction_onClick = functionName;
		
	}
	,
	// {{{ setCallBackFunctionOnDblClick()
    /**
     *	Specify function to call when users clicks on an image
     *
     *	@param functionName - only the name of the image. an image object(DHTMLSuite.mediaModel) will be sent to this function(representing the image clicked on).
     *
     * @public	
     */		
	setCallBackFunctionOnDblClick : function(functionName)
	{
		this.callBackFunction_onDblClick = functionName;
		
	}
	,
	// {{{ setCallBackFunctionOnMouseOver()
    /**
     *	Specify function to call when the mouse pointer "enters" an image
     *
     *	@param functionName - only the name of the image. an image object(DHTMLSuite.mediaModel) will be sent to this function(representing the image the mouse rolled over).
     *
     * @public	
     */		
	setCallBackFunctionOnMouseOver : function(functionName)
	{
		this.callBackFunction_onMouseOver = functionName;
		
	}
	,
	// {{{ setCallBackFunctionOnMouseMove()
    /**
     *	Specify function to call when the mouse moves over on an image
     *
     *	@param functionName - only the name of the image. an image object(DHTMLSuite.mediaModel) will be sent to this function(representing the image the mouse rolled over).
     *
     * @public	
     */		
	setCallBackFunctionOnMouseMove : function(functionName)
	{
		this.callBackFunction_onMouseMove = functionName;
		
	}
	// }}}
	,
	// {{{ deleteImageFromGallery()
    /**
     *	Removes an image from the gallery. The image is removed from the view and from the media model.
     *
     *	@param String idOfImage - Id of image/media to delete, example: "image1"
     *
     * @public	
     */			
	deleteImageFromGallery : function(idOfImage)
	{
		var retId = this.collectionModel.__removeImage(idOfImage);
		if(retId){	// media model image exists with this id ?
			var obj = document.getElementById(retId);
			DHTMLSuite.discardElement(obj);
		}else{	// id doesn't match id in media collection model. loop through div elements and check each one by id.
			for(var no=0;no<this.divElementImageBoxes.length;no++){
				if(this.divElementImageBoxes[no].id == idOfImage){	// Match found
					var mediaRefId = this.divElementImageBoxes[no].getAttribute('mediaRefId');	// get a media reference.
					if(!mediaRefId)mediaRefId = this.divElementImageBoxes[no].mediaRefId;
					var mediaRef = this.collectionModel.getMediaById(mediaRefId); 
					this.collectionModel.__removeImage(mediaRef.id);	// Remove media from collection mode.
					DHTMLSuite.discardElement(this.divElementImageBoxes[no]);
				}
			}
		}
	}
	// }}}
	,
	// {{{ destroy()
    /**
     *	Delete the gallery HTML elements
     *
     *
     * @public	
     */		
	destroy : function()
	{
		DHTMLSuite.discardElement(this.divElement);
	}
	// }}}
	,
	// {{{ addImageSelectionObject()
    /**
     *	Add image selection feature to this gallery. Argument to this method is an object of class DHTMLSuite.imageSelection
     *
     *	@param Object imageSelectionObj - Object of class DHTMLSuite.imageSelection
     *
     * @private	
     */		
	addImageSelectionObject : function(imageSelectionObj)
	{
		this.imageSelectionObj = imageSelectionObj;		
	}
	// }}}
	,	
	// {{{ __createMainDivEl()
    /**
     *	Create  main div for this widget
     *
     *
     * @private	
     */		
	__createMainDivEl : function()
	{
		this.divElement = document.createElement('DIV');
		this.divElement.className = 'DHTMLSuite_floatingGalleryContainer';
		if(this.idOfParentElementToGallery)
			document.getElementById(this.idOfParentElementToGallery).appendChild(this.divElement);
		else
			document.body.appendChild(this.divElement);
	}
	// }}}
	,
	// {{{ __createImageBoxes()
    /**
     *	Create divs for each image
     *
     *
     * @private	
     */		
	__createImageBoxes : function()
	{
		var ind = this.objectIndex;
		for(var no=0;no<this.collectionModel.mediaObjects.length;no++){
			this.divElementImageBoxes[no] = document.createElement('DIV');
			this.divElementImageBoxes[no].className='DHTMLSuite_floatingGalleryImageBox';
			this.divElementImageBoxes[no].id=this.collectionModel.mediaObjects[no].id;
			this.divElementImageBoxes[no].style.backgroundImage = 'url("' + this.collectionModel.mediaObjects[no].thumbnailPath + '")';
			this.divElementImageBoxes[no].setAttribute('mediaRefId',this.collectionModel.mediaObjects[no].id);
			this.divElementImageBoxes[no].mediaRefId = this.collectionModel.mediaObjects[no].id;
			this.divElement.appendChild(this.divElementImageBoxes[no]);
			
			var titleDiv = document.createElement('DIV');
			titleDiv.className='DHTMLSuite_floatingGalleryImageTitle';
			titleDiv.innerHTML = this.collectionModel.mediaObjects[no].title;
			this.divElementImageBoxes[no].appendChild(titleDiv);
			
			if(this.callBackFunction_onClick)eval("DHTMLSuite.commonObj.addEvent(this.divElementImageBoxes[no],'click',function(){ DHTMLSuite.variableStorage.arrayDSObjects[" + ind + "].__parseCallBackFunction('click'," + no+ "); });");
			if(this.callBackFunction_onDblClick)eval("DHTMLSuite.commonObj.addEvent(this.divElementImageBoxes[no],'dblclick',function(){ DHTMLSuite.variableStorage.arrayDSObjects[" + ind + "].__parseCallBackFunction('dblClick'," + no+ "); });");
			if(this.callBackFunction_onMouseOver)eval("DHTMLSuite.commonObj.addEvent(this.divElementImageBoxes[no],'mouseover',function(){ DHTMLSuite.variableStorage.arrayDSObjects[" + ind + "].__parseCallBackFunction('mouseOver'," + no+ "); });");
			if(this.callBackFunction_onMouseMove)eval("DHTMLSuite.commonObj.addEvent(this.divElementImageBoxes[no],'mousemove',function(){ DHTMLSuite.variableStorage.arrayDSObjects[" + ind + "].__parseCallBackFunction('mouseOver'," + no+ "); });");
	
			
		}	
		
		var clearingDiv = document.createElement('DIV');
		clearingDiv.style.clear = 'both';
		this.divElement.appendChild(clearingDiv);	
	}
	,
	// {{{ __parseCallBackFunction()
    /**
     *	Parses callback string
     *
     *	@param String action -Which callback action
     *	@param Integer no - Index of media
     *
     * @private	
     */			
	__parseCallBackFunction : function(action,mediaIndex)
	{
		var callBackString=false;
		switch(action){
			case "click":
				callBackString=this.callBackFunction_onClick;
				break;	
			case "dblClick":
				callBackString=this.callBackFunction_onDblClick;
				break;	
			case "mouseOver":
				callBackString = this.callBackFunction_onMouseOver;
				break;
			case "mouseMove":
				callBackString = this.callBackFunction_onMouseMove;
				break;
		}	
		if(callBackString)callBackString = callBackString + '(this.collectionModel.mediaObjects[' + mediaIndex + '])';
		if(!callBackString)return;
		try{
			eval(callBackString);
		}catch(e){
			alert('Error in callback :\n' + callBackString + '\n' + e.message);
		}		
	}	
	// }}}
	,
	// {{{ __parseCallBackFunction()
    /**
     *	Parses callback string
     *
     *	@param String action -Which callback action
     *	@param Integer no - Index of media
     *
     * @private	
     */		
	__initiallyHandleimageSelection : function()
	{
		if(!this.imageSelectionObj)return;
		this.imageSelectionObj.__setMediaCollectionModelReference(this.collectionModel);
		for(var no=0;no<this.divElementImageBoxes.length;no++){
			this.imageSelectionObj.addSelectableElement(this.divElementImageBoxes[no]);
			this.divElementImageBoxes[no].onselectstart = function(){ return false; };
			DHTMLSuite.commonObj.__addEventEl(this.divElementImageBoxes[no]);	
			var subs = this.divElementImageBoxes[no].getElementsByTagName('*');
			for(var no2=0;no2<subs.length;no2++){
				subs[no2].onselectstart = function(){ return false; };
				DHTMLSuite.commonObj.__addEventEl(subs[no2]);	
			}
		}
	}
}


/*[FILE_START:dhtmlSuite-imageSelection.js] */
/************************************************************************************************************
*	DHTML Image enlarger.
*
*	Created:						January, 14th, 2006
*	@class Purpose of class:		Tool for selecting and dragging images
*			
*	Css files used by this script:	image-selection.css
*
*	Demos of this class:			
*
* 	Update log:
*
************************************************************************************************************/
/**
* @constructor
* @class Purpose of class:	Tool to select objects(example: images) by dragging a rectangle around them. The objects will be made dragable<br>
*	Demo: (<a href="../../demos/demo-image-gallery-1.html" target="_blank">Demo</a>)
*
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
*/

DHTMLSuite.imageSelection = function(){	
	var layoutCSS;	
	var callBackFunction_onDrop;		// Call back function on drop	
	var objectIndex;
	var divElementSelection;
	var divElementSelection_transparent;
	var selectableEls;
	var selectedEls;					// Array of selected elements
	var selectableElsScreenProps;
	var collectionModelReference;		// Reference to media collection ( data source for images )
	var destinationEls;					// Array of destination elements.
	var currentDestEl;					// Reference to current destination element
	
	var selectionStatus;				// -1 when selection isn't in progress, 0 when it's being initialized, 5 when it's ready
	var dragStatus;						// -1 = drag not started, 0-5 = drag initializing, 5 = drag in process.
	var startCoordinates;
	var selectionResizeInProgress;		// variable which is true when code for the selection area is running
	var selectionStartArea;				// Selection can only starts within this element
	var selectionOrDragStartEl;			// Element triggering drag or selection
	
	this.selectionResizeInProgress = false;
	this.selectionStatus = -1;
	this.dragStatus = -1;
	this.startCoordinates = new Object();
	this.layoutCSS = 'image-selection.css';
	this.selectableEls = new Array();
	this.destinationEls = new Array();
	this.collectionModelReference = false;
	this.selectableElsScreenProps = new Object();
	this.selectedEls = new Array();
	
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();	// This line starts all the init methods
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}	

	this.objectIndex = DHTMLSuite.variableStorage.arrayDSObjects.length;
	DHTMLSuite.variableStorage.arrayDSObjects[this.objectIndex] = this;	
	
}

DHTMLSuite.imageSelection.prototype = {
	// {{{ init()
    /**
     *	Initializes the script
     *
     *
     * @public	
     */		
	init : function()
	{
		try{
			DHTMLSuite.commonObj.loadCSS(this.layoutCSS);
		}catch(e){
			alert('Unable to load css file dynamically. You need to include dhtmlSuite-common.js');
		}
		this.__createdivElementsForSelection();
		this.__createdivElementsForDrag();
		this.__addEvents();
		this.__setSelectableElsScreenProps();
	}
	// }}}
	,
	// {{{ addDestinationElement()
    /**
     *	Add single destination element
     *
     *	Object elementReference - Element reference, id of element or the element it's self.
     *
     * @public	
     */		
	addDestinationElement : function(elementReference)
	{
		elementReference = DHTMLSuite.commonObj.getEl(elementReference);
		this.destinationEls[this.destinationEls.length] = elementReference;
	}
	// }}}
	,
	// {{{ addselectableEls()
    /**
     *	Add selectable elements
     *
     *	@param Object parentElementReference - id of parent html element or the parent element it's self. all direct children will be dragable
     *	@param String tagName - Which tag, example "td","li" or "a"
     *	@param String className - optional element
     *	@return Boolean success - true if parent element was found, false otherwise.
     *
     * @public	
     */		
	addDestinationElementsByTagName : function(parentElementReference,tagName,className)
	{
		parentElementReference = DHTMLSuite.commonObj.getEl(parentElementReference);
		if(!parentElementReference){
			return false;
		}
		var subs = parentElementReference.getElementsByTagName(tagName);
		for(var no=0;no<subs.length;no++){
			if(className && subs[no].className!=className)continue;
			this.destinationEls[this.destinationEls.length] = subs[no];	
		}
		this.__addEventsTodestinationEls(subs);
		return true;
		
	}
	// }}}
	,
	// {{{ addSelectableElements()
    /**
     *	Add selectable elements
     *
     *	Object parentElementReference - id of parent html element or the parent element it's self. all direct children will be dragable
     *
     * @public	
     */		
	addSelectableElements : function(parentElementReference)
	{
		var obj = DHTMLSuite.commonObj.getEl(parentElementReference);
		var subElement = obj.getElementsByTagName('*')[0];		
		while(subElement){
			this.selectableEls[this.selectableEls.length] = subElement;
			this.__addPropertiesToSelectableElement(subElement);
			subElement = subElement.nextSibling;	
		}		
	}	
	// }}}
	,
	// {{{ addSelectableElement()
    /**
     *	Add single selectable element
     *
     *	Object elementReference - id of html element or the reference to the element it's self. all direct children will be dragable
     *
     * @public	
     */		
	addSelectableElement : function(elementReference)
	{
		this.selectableEls[this.selectableEls.length] = DHTMLSuite.commonObj.getEl(elementReference);
		this.__addPropertiesToSelectableElement(elementReference);
		
	}	
	// }}}
	,
	// {{{ setCallBackFunctionOnDrop()
    /**
     *	Specify call back function - on drop 
     *	This function will be called when elements are dropped on a destination node
     *	Arguments to this function will be an array of the dragged elements and a reference to the destionation object.
     *
     *
     * @public	
     */		
	setCallBackFunctionOnDrop : function(functionName)
	{
		this.callBackFunction_onDrop = functionName;
	}
	// }}}
	,
	// {{{ setSelectionStartArea()
    /**
     *	Restrict where the selection may start.
     *
     *
     * @public	
     */		
	setSelectionStartArea : function(elementReference)
	{
		elementReference = DHTMLSuite.commonObj.getEl(elementReference);
		this.selectionStartArea = elementReference;
		
	}
	// }}}
	,
	// {{{ __createdivElementSelectionsForSelection()
    /**
     *	Create div elements for the selection
     *
     *
     * @private	
     */		
	__createdivElementsForSelection : function()
	{
		/* Div elements for selection */
		this.divElementSelection = document.createElement('DIV');
		this.divElementSelection.style.display='none';
		this.divElementSelection.id = 'DHTMLSuite_imageSelectionSel';	
		this.divElementSelection.innerHTML = '<span></span>';
		document.body.insertBefore(this.divElementSelection,document.body.firstChild);
		this.divElementSelection_transparent = document.createElement('DIV');
		this.divElementSelection_transparent.id = 'DHTMLSuite_imageSelection_transparentDiv';
		this.divElementSelection.appendChild(this.divElementSelection_transparent);
		this.divElementSelection_transparent.innerHTML = '<span></span>';
		
	}
	// }}}
	,
	// {{{ __setMediaCollectionModelReference()
    /**
     *	Specify media collection model reference. 
     *
     *
     * @private	
     */			
	__setMediaCollectionModelReference : function(collectionModelReference){
		this.collectionModelReference = collectionModelReference;
	}
	,
	// {{{ __createdivElementsForDrag()
    /**
     *	Create div elements for the drag
     *
     *
     * @private	
     */		
	__createdivElementsForDrag : function()
	{
		/* Div elements for selection */
		this.divElementDrag = document.createElement('DIV');
		this.divElementDrag.innerHTML = '<span></span>';
		this.divElementDrag.style.display='none';
		this.divElementDrag.id = 'DHTMLSuite_imageSelectionDrag';
		document.body.insertBefore(this.divElementDrag,document.body.firstChild);	
		
		this.divElementDragContent = document.createElement('DIV');
		this.divElementDragContent.innerHTML = '<span></span>';
		this.divElementDragContent.id = 'DHTMLSuite_imageSelectionDragContent';
		this.divElementDrag.appendChild(this.divElementDragContent);
		
		var divElementTrans = document.createElement('DIV');
		divElementTrans.className = 'DHTMLSuite_imageSelectionDrag_transparentDiv';
		this.divElementDrag.appendChild(divElementTrans);
		
	
	}
	// }}}
	,
	// {{{ __initImageSelection()
    /**
     *	Mouse down - start selection or drag.
     *
     *
     * @private	
     */		
	__initImageSelection : function(e)
	{
		var initImageSelector;
		if(document.all)e = event;
		var src = DHTMLSuite.commonObj.getSrcElement(e);
		
		if(src.onmousedown){	/* Exception for the drag */		
			//if(src.onmousedown.toString().indexOf('initImageSelector')<0)return;	
		}
		if(src.className.indexOf('paneSplitter_vertical')>=0 || src.className.indexOf('paneSplitter_horizontal')>=0 ){	/* Exception for the drag */
			return;	
		}
		
		this.selectionOrDragStartEl = src;
		this.startCoordinates.x = e.clientX + document.documentElement.scrollLeft + 3;
		this.startCoordinates.y = e.clientY + document.documentElement.scrollTop + 3; 
					
		if(!this.__isReadyForDrag(e)){	/* Image selection */
			if(!e.shiftKey && !e.ctrlKey)this.__clearselectedElsArray();
			this.selectionStatus = 0;
			this.divElementSelection.style.left = this.startCoordinates.x + 'px';
			this.divElementSelection.style.top = this.startCoordinates.y + 'px';
			this.divElementSelection.style.width = '1px';
			this.divElementSelection.style.height = '1px';
			this.__setSelectableElsScreenProps();
			this.__countDownToSelectionStart();
			
		}else{	/* Drag selected images */
			this.divElementDrag.style.left = this.startCoordinates.x + 'px';
			this.divElementDrag.style.top = this.startCoordinates.y + 'px';			
			this.dragStatus = 0;	
			this.__countDownToDragStart();
			
			
		}	
		
		return false;	
	}
	// }}}
	,
	// {{{ __isReadyForDrag()
    /**
     *	A small delay before selection starts.
     *
     *
     * @private	
     */		
	__isReadyForDrag : function(e)
	{
		var src = DHTMLSuite.commonObj.getObjectByAttribute(e,'DHTMLSuite_selectableElement');
		if(!src)return false;
		if(this.selectedEls.length>0)return true;
		return false;
		
	}
	// }}}
	,
	// {{{ __countDownToDragStart()
    /**
     *	A small delay before drag starts.
     *
     *
     * @private	
     */		
	__countDownToDragStart : function()
	{
		if(this.dragStatus>=0 && this.dragStatus<5){
			var ind = this.objectIndex;
			this.dragStatus++;
			var timeOut=60;
			if(this.selectedEls.length>1)timeOut=10;
			setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__countDownToDragStart()',timeOut);				
		}
		if(this.dragStatus==5){
			this.__fillDragBoxWithSelectedItems();
			this.divElementDrag.style.display='block';	// Show selection box.
		}
		
	}
	// }}}
	,
	// {{{ __fillDragBoxWithSelectedItems()
    /**
     *	Fill drag box with selected items.
     *
     *
     * @private	
     */			
	__fillDragBoxWithSelectedItems : function()
	{
		this.divElementDragContent.innerHTML = '';
		if(this.collectionModelReference){	/* Media model exists */
			
			for(var no=0;no<this.selectedEls.length;no++){
				var obj = this.selectedEls[no];
				var mediaRefId = obj.getAttribute('mediaRefId');
				if(!mediaRef)mediaRef = obj.mediaRefId;
				var mediaRef = this.collectionModelReference.getMediaById(mediaRefId);
			

				var div = document.createElement('DIV');
				div.innerHTML = '<span></span>';
				div.className = 'DHTMLSuite_imageSelectionDragBox';
				div.style.backgroundImage = 'url(\'' + mediaRef.thumbnailPathSmall + '\')';
				this.divElementDragContent.appendChild(div);
			}			
		}else{	/* No media model - Just clone the node - May have to figure out something more clever here as this hasn't been tested fully yet */
			for(var no=0;no<this.selectedEls.length;no++){
				var el = this.selectedEls.cloneNode(true);	
				this.divElementDragContent.appendChild(el);				
			}			
		}		
	}
	// }}}
	,
	// {{{ __countDownToSelectionStart()
    /**
     *	A small delay before selectino starts.
     *
     *
     * @private	
     */		
	__countDownToSelectionStart : function()
	{
		if(this.selectionStatus>=0 && this.selectionStatus<5){
			var ind = this.objectIndex;
			this.selectionStatus++;
			setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__countDownToSelectionStart()',10);	
		}
		if(this.selectionStatus==5)this.divElementSelection.style.display='block';	// Show selection box.
		return false;
	}
	// }}}
	,
	// {{{ __moveDragBox()
    /**
     *	Move div with the dragged elements
     *
     *
     * @private	
     */		
	__moveDragBox : function(e)
	{		
		if(this.dragStatus<5)return;	
		if(document.all)e = event;
		this.divElementDrag.style.left = (this.startCoordinates.x + (e.clientX + 3 - this.startCoordinates.x)) + 'px';			
		this.divElementDrag.style.top = (this.startCoordinates.y + (e.clientY + 3 - this.startCoordinates.y)) + 'px';			
	}
	// }}}	
	,
	// {{{ __resizeSelectionDivBox()
    /**
     *	Resize selection div box.
     *
     *
     * @private	
     */		
	__resizeSelectionDivBox : function(e)
	{
		if(this.selectionStatus<5)return;	// Selection in progress ?
		if(this.selectionResizeInProgress)return;	// If this function is allready running, don't start another iteration until it's finished.
					
		this.selectionResizeInProgress = true;	// Selection code is running!

		if(document.all)e = event;
		var width = e.clientX - this.startCoordinates.x;
		var height = e.clientY + document.documentElement.scrollTop - this.startCoordinates.y;
		
		if(width>0){
			this.divElementSelection.style.left = (this.startCoordinates.x) + 'px'; 	
			this.divElementSelection.style.width = width + 'px'; 	
				
		}else{
			this.divElementSelection.style.width = (this.startCoordinates.x - (this.startCoordinates.x + width)) + 'px'; 	
			this.divElementSelection.style.left =(this.startCoordinates.x + width) + 'px'; 
		}			
		if(height>0){
			this.divElementSelection.style.top = (this.startCoordinates.y) + 'px'; 	
			this.divElementSelection.style.height = height + 'px'; 
		}else{
			this.divElementSelection.style.height = (this.startCoordinates.y - (this.startCoordinates.y + height)) + 'px'; 	
			this.divElementSelection.style.top =(this.startCoordinates.y + height) + 'px'; 
		}
		// this.__clearselectedElsArray();
		this.__highlightElementsWithinSelectionArea();
		this.selectionResizeInProgress = false;
	}
	// }}}
	,
	// {{{ __clearSingleElementFromSelectedArray()
    /**
     *	Clear a single element from the selected array
     *
     *  @param Object - HTML element
     *
     * @private	
     */		
	__clearSingleElementFromSelectedArray : function(el)
	{
		for(var no=0;no<this.selectedEls.length;no++){
			if(this.selectedEls[no]==el){
				this.selectedEls[no].className = this.selectedEls[no].className.replace(' imageSelection','');
				this.selectedEls.splice(no,1);
				return;
			}
		}		
	}
	// }}}
	,
	// {{{ __clearselectedElsArray()
    /**
     *	Remove highlight effect from all previous selected elements.
     *
     *
     * @private	
     */		
	__clearselectedElsArray : function()
	{
		
		for(var no=0;no<this.selectedEls.length;no++){
			if(this.selectedEls[no].className.indexOf('imageSelection')>=0)this.selectedEls[no].className = this.selectedEls[no].className.replace(' imageSelection','');
		}	
		this.selectedEls = new Array();	
	}
	// }}}
	,
	// {{{ __highlightElementsWithinSelectionArea()
    /**
     *	Loop through selectable elements and highlight those within the selection area.
     *
     *
     * @private	
     */		
	__highlightElementsWithinSelectionArea : function()
	{		
		var x1 = this.divElementSelection.style.left.replace('px','')/1;
		var y1 = this.divElementSelection.style.top.replace('px','')/1;
		var x2 = x1 + this.divElementSelection.style.width.replace('px','')/1;
		var y2 = y1 + this.divElementSelection.style.height.replace('px','')/1;
		for(var no=0;no<this.selectableEls.length;no++){
			if(this.__isElementWithinSelectionArea(this.selectableEls[no],x1,y1,x2,y2)){
				this.__addSelectedElement(this.selectableEls[no]);
			}else{
				this.__clearSingleElementFromSelectedArray(this.selectableEls[no]);
			}
		}	
	}
	// }}}
	,
	// {{{ __isElementInSelectedArray()
    /**
     *	Is element allready added to the selected item array ?
     *
     *
     * @private	
     */		
	__isElementInSelectedArray : function(el)
	{
		for(var no=0;no<this.selectedEls.length;no++){	/* element allready added ? */
			if(this.selectedEls[no]==el)return true;
		}		
		return false;		
	}
	,
	// {{{ __addSelectedElement()
    /**
     *	Highlight element and add it to the collection of selected elements.
     *
     *
     * @private	
     */		
	__addSelectedElement : function(el)
	{
		if(el.className.indexOf('imageSelection')==-1){
			if(el.className)
				el.className = el.className + ' imageSelection';	// Adding " imageSelection" to the class name
			else
				el.className = 'imageSelection';
		}
		if(this.__isElementInSelectedArray(el))return;	
		this.selectedEls[this.selectedEls.length] = el;	// Add element to selected elements array
		
	}
	// }}}
	,
	// {{{ __setSelectableElsScreenProps()
    /**
     *	Save selectable elements x,y, width and height - this is done when the selection process is initiated. 
     *
     *	@return Boolean element within selection area. If the selection box is over an element, return true, otherwise return false
     *
     * @private	
     */	
	__isElementWithinSelectionArea : function(el,x1,y1,x2,y2)
	{		
		var elX1 = this.selectableElsScreenProps[el.id].x;
		var elY1 = this.selectableElsScreenProps[el.id].y;
		var elX2 = this.selectableElsScreenProps[el.id].x + this.selectableElsScreenProps[el.id].width;
		var elY2 = this.selectableElsScreenProps[el.id].y + this.selectableElsScreenProps[el.id].height;
		
		/*		
		ILLUSTRATION - Image boxes within the boundaries of a selection area.
		
		|-----------|   |-----------|   |-----------|
		|	BOX		|	|	BOX		|	|	BOX		|
		|	|-----------------------------------|	|
		|	|		|	|			|	|		|	|
		|---|-------|   |-----------|	|-----------|
			|	SELECTION AREA					|	
			|									|	
		|-----------|	|-----------|	|-----------|
		|	|	BOX	|	|	BOX		|	|	BOX	|	|
		|	|		|	|			|	|		|	|
		|	|		|	|			|	|		|	|
		|-----------|	|-----------|	|-----------|
			|									|
			|									|	
		|-----------|	|-----------|	|-----------|
		|	|		|	|			|	|		|	|
		|	|-------|---|-----------|---|-------|	|
		|BOX		|	|BOX		|	|	BOX	|	|
		|-----------|	|-----------|	|-----------|		
		
		*/
		if(elX2<x1)return false;
		if(elY2<y1)return false;
		if(elX1>x2)return false;
		if(elY1>y2)return false;
		if((elY1<=y1 && elY2>=y1) || (elY1>=y1 && elY2<=y2) || (elY1<=y2 && elY2>=y2)){	/* Y coordinates of element within selection area */
			if(elX1<=x1 && elX2>=x1)return true;	/* left edge of element at the left of selection area, but right edge within */
			if(elX1>=x1 && elX2<=x2)return true;	/* Both left and right edge of element within selection area */
			if(elX1<=x2 && elX2>=x2)return true;	/* Left edge of element within selection area, but right element outside */	
		}
		
		return false;
		
	}
	// }}}
	,
	// {{{ __setSelectableElsScreenProps()
    /**
     *	Save selectable elements x,y, width and height - this is done when the selection process is initiated. 
     *
     *
     * @private	
     */		
	__setSelectableElsScreenProps : function()
	{

		for(var no=0;no<this.selectableEls.length;no++){
			var obj = this.selectableEls[no];
			if(!obj.parentNode){	// Element has been deleted from the view ?
				this.selectableEls.splice(no,1);
				this.__setSelectableElsScreenProps();
				return;				
			}
			var id = obj.id;
			this.selectableElsScreenProps[id] = new Object();
			var ref = this.selectableElsScreenProps[id];
			ref.x = DHTMLSuite.commonObj.getLeftPos(obj);
			ref.y = DHTMLSuite.commonObj.getTopPos(obj);
			ref.width = obj.offsetWidth;
			ref.height = obj.offsetHeight;
		}
			
	}
	// }}}
	,
	// {{{ __endImageSelection()
    /**
     *	Mouse up event - hide the rectangle
     *
     *
     * @private	
     */		
	__endImageSelection : function(e)
	{
		if(document.all)e = event;
		if(this.selectionStatus>=0){
			this.divElementSelection.style.display='none';
			if(this.__isReadyForDrag(e) && this.selectionStatus==-1)this.__clearselectedElsArray();
			this.selectionStatus = -1;	
		}
		if(this.dragStatus>=0){			
			var src = DHTMLSuite.commonObj.getSrcElement(e);
			if(this.currentDestEl)this.__handleCallBackFunctions('drop');	
			this.divElementDrag.style.display='none';				
			if(src!=this.selectionOrDragStartEl || !src.className)this.__clearselectedElsArray();	
			this.__deselectDestinationElement();	
			this.dragStatus = -1;				
		}		
	}
	// }}}
	,
	// {{{ __handleCallBackFunctions()
    /**
     *	Handle call back function, i.e. evaluate js
     *	 
     *	String action - Which call back
     *
     * @private	
     */		
	__handleCallBackFunctions : function(action)
	{
		var callbackString = '';
		switch(action)
		{
			case 'drop':
				if(this.callBackFunction_onDrop)callbackString = this.callBackFunction_onDrop;
				break;
				
		}
		
		if(callbackString)eval(callbackString + '(this.selectedEls,this.currentDestEl)');
		
	}
	// }}}
	,
	// {{{ __deselectDestinationElement()
    /**
     *	Mouse away from destination element
     *	Deselect it and clear the property currentDestEl  
     *
     *
     * @private	
     */		
	__deselectDestinationElement : function(e)
	{
		if(this.dragStatus<5)return;
		if(!this.currentDestEl)return;
		if(document.all)e = event;
		
		if(e && !DHTMLSuite.commonObj.isObjectClicked(this.currentDestEl,e))return;
		
		this.currentDestEl.className = this.currentDestEl.className.replace(' imageSelection','');
		this.currentDestEl.className = this.currentDestEl.className.replace('imageSelection','');
		this.currentDestEl = false;
	}
	// }}}
	,
	// {{{ __selectDestinationElement()
    /**
     *	Mouse over a destination element. 
     *
     *
     * @private	
     */		
	__selectDestinationElement : function(e){
		if(this.dragStatus<5)return;
		if(document.all)e = event;
		var src = DHTMLSuite.commonObj.getObjectByAttribute(e,'imageSelectionDestination');
		this.currentDestEl = src;
		if(this.currentDestEl.className)
			this.currentDestEl.className = this.currentDestEl.className + ' imageSelection';
		else
			this.currentDestEl.className = 'imageSelection';		
	}
	// }}}
	,
	// {{{ __selectSingleElement()
    /**
     *	Mouse down on a specific element
     *
     *
     * @private	
     */		
	__selectSingleElement : function(e,eventType)
	{
		
		if(document.all) e = event;
		var src = DHTMLSuite.commonObj.getObjectByAttribute(e,'DHTMLSuite_selectableElement');
		
		var elementAllreadyInSelectedArray =this.__isElementInSelectedArray(src); 
		if(!e.ctrlKey && !elementAllreadyInSelectedArray)this.__clearselectedElsArray();
		if(e.ctrlKey && elementAllreadyInSelectedArray){
			this.__clearSingleElementFromSelectedArray(src);			
		}else{
			this.__addSelectedElement(src);	
		}
		
	}
	// }}}
	,
	// {{{ __addPropertiesToSelectableElement()
    /**
     *	Add mouse down event and assigne custom property to selectable element.
     *
     *
     * @private	
     */		
	__addPropertiesToSelectableElement : function(elementReference)
	{
		var ind = this.objectIndex;
		elementReference.onmousedown = function(e){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__selectSingleElement(e); };
		//DHTMLSuite.commonObj.addEvent(elementReference,'mousedown',function(e){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__selectSingleElement(e,'mousedown'); });	// Add click event to single element
		elementReference.setAttribute('DHTMLSuite_selectableElement','1');	
		this.__addOnScrollEventsToSelectableEls(elementReference);		
	}	
	// }}}
	,
	// {{{ __addEventsTodestinationEls()
    /**
     *	Add mouse over event to destination objects.
     *	
     *	@param Array inputElements - optional - if given, only these elements will be parsed, if not give, all destination elements will be parsed
     * @private	
     */		
	__addEventsTodestinationEls : function(inputElements)
	{
		var ind = this.objectIndex;
		
		if(inputElements){
			for(var no=0;no<inputElements.length;no++){
				inputElements[no].onmouseover = function(e){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__selectDestinationElement(e); };
				inputElements[no].onmouseout = function(e){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__deselectDestinationElement(e); };
				inputElements[no].setAttribute('imageSelectionDestination','1');
				inputElements[no].imageSelectionDestination = '1';	
				DHTMLSuite.commonObj.__addEventEl(inputElements[no]);	
			}			
		}else{
			for(var no=0;no<this.destinationEls.length;no++){
				this.destinationEls[no].onmouseover = function(e){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__selectDestinationElement(e); };
				this.destinationEls[no].onmouseout = function(e){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__deselectDestinationElement(e); };
				DHTMLSuite.commonObj.__addEventEl(this.destinationEls[no]);	
				this.destinationEls[no].setAttribute('imageSelectionDestination','1');
				this.destinationEls[no].imageSelectionDestination = '1';
				
			}
		}
		
	}
	// }}}
	,
	// {{{ __addOnScrollEventsToSelectableEls()
    /**
     *	Don't allow selection on scroll
     *
     *
     * @private	
     */			
	__addOnScrollEventsToSelectableEls : function(el)
	{
		var ind = this.objectIndex;
		var src = el;
		while(src && src.tagName.toLowerCase()!='body'){
			src = src.parentNode;	
			if(!src.onscroll)DHTMLSuite.commonObj.addEvent(src,'scroll',function(e){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__endImageSelection(e); });
		}			
	}
	// }}}}
	,
	// {{{ __addEvents()
    /**
     *	Add basic events for this widget
     *
     *
     * @private	
     */		
	__addEvents : function()
	{
		var ind = this.objectIndex;
		document.documentElement.onselectstart = function(){ return false; };	// disable text selection
		DHTMLSuite.commonObj.__addEventEl(document.documentElement.onselectstart);
		
		this.destinationEls[no]
		if(this.selectionStartArea){
			DHTMLSuite.commonObj.addEvent(this.selectionStartArea,'mousedown',function(e){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__initImageSelection(e); });
		}else{
			DHTMLSuite.commonObj.addEvent(document.documentElement,'mousedown',function(e){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__initImageSelection(e); });
		}
		DHTMLSuite.commonObj.addEvent(document.documentElement,'mousemove',function(e){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__resizeSelectionDivBox(e); });
		DHTMLSuite.commonObj.addEvent(document.documentElement,'mousemove',function(e){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__moveDragBox(e); });
		DHTMLSuite.commonObj.addEvent(document.documentElement,'mouseup',function(e){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__endImageSelection(e); });
		DHTMLSuite.commonObj.addEvent(window,'resize',function(){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__setSelectableElsScreenProps(); });
		
		var imgs = document.getElementsByTagName('IMG');
		for(var no=0;no<imgs.length;no++){
			imgs[no].ondragstart = function(){ return false; };
			if(!imgs[no].onmousedown)imgs[no].onmousedown = function(){ return false; };
			DHTMLSuite.commonObj.__addEventEl(imgs[no]);
		}
		
		this.__addEventsTodestinationEls();

	}
	
}

/*[FILE_START:dhtmlSuite-imageEnlarger.js] */
/************************************************************************************************************
*	DHTML Image enlarger.
*
*	Created:						January, 7th, 2006
*	@class Purpose of class:		Enlarge an image and displays it at the center of the screen
*			
*	Css files used by this script:	image-enlarger.css
*
*	Demos of this class:			demo-image-enlarger.html
*
* 	Update log:
*
************************************************************************************************************/
/**
* @constructor
* @class Purpose of class:	Enlarge an image and displays it at the center of the screen. (<a href="../../demos/demo-image-enlarger.html" target="_blank">Demo</a>)<br>
*		The constructor accepts an associative array of properties as argument. Possible keys in this array:<br>
*		isDragable - true if the image is drabable<br>
*		isModal - true if the image should be modal<br>
*		closeLinkTxt - Text of close links<br>
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
*/

DHTMLSuite.imageEnlarger = function(props){
	
	var layoutCSS;
	this.layoutCSS = 'image-enlarger.css';
	var divElement;
	var divElementImageBox;
	var divElInner;
	var iframeEl;
	
	var currentImagePath;
	var objectIndex;
	var transparentDiv;
	var captionDiv;
	var msieOpacity;
	var isDragable;
	var isModal;
	
	this.isDragable = false;
	this.msieOpacity = 50;
	this.isModal = true;
	
	var resizeTransparentAllowed;
	var closeLinkTxt;
	var dragObject;
	var dragOffsetX;
	var dragOffsetY;
	
	this.dragOffsetX = 0;
	this.dragOffsetY = 0;
	
	this.closeLinkTxt = 'Close';
	
	this.resizeTransparentAllowed = true;
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();	// This line starts all the init methods
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}	

	this.objectIndex = DHTMLSuite.variableStorage.arrayDSObjects.length;
	DHTMLSuite.variableStorage.arrayDSObjects[this.objectIndex] = this;	
	
	if(props)this.__setInitProps(props);
	
}

DHTMLSuite.imageEnlarger.prototype = {
	// {{{ __setInitProps()
    /**
     *	Set initial properties
     *
     *	@param Array props - Associative array of properties
     *
     * @public	
     */		
	__setInitProps : function(props)
	{
		if(props.closeLinkTxt)this.closeLinkTxt = props.closeLinkTxt;
		if(props.isDragable)this.isDragable = props.isDragable;
		if(props.isModal || props.isModal===false)this.isModal = props.isModal;
		
	}
	// }}}
	,
	// {{{ displayImage()
    /**
     *	Display image
     *
     *	@param String imagePath - Path to image
     *	@param String title - Title of image
     *	@param String description - Description/Caption of image.
     *
     * @public	
     */		
	displayImage : function(imagePath,title,description)
	{
		DHTMLSuite.commonObj.loadCSS(this.layoutCSS);
		if(!this.divElement)this.__createHTMLElements();
		this.__resizeTransparentDiv();
		this.__clearHTMLElement();
		this.__addImageElement(imagePath);		
		this.__setCaptionText(title,description);
		this.__displayDivElement();		
		this.currentImagePath = imagePath;		
	}
	// }}}
	,
	// {{{ setIsDragable()
    /**
     *	Specify if the image should be dragable, default = false;
     *
     *
     * @public	
     */		
	setIsDragable : function(isDragable)
	{
		this.isDragable = isDragable;
	}
	// }}}	
	,
	// {{{ isModal()
    /**
     *	Specify if the window should be modal, i.e. a transparent div behind the image.
     *
     *
     * @public	
     */		
	setIsModal : function(isModal)
	{
		this.isModal = isModal;
	}
	// }}}	
	,
	// {{{ setDragOffset()
    /**
     *	If drag is enabled, you can set drag offset here. It is useful if you experience some "jumping" when this script is initialized.
     *	That jumping is caused by the drag script not being able to determine the position of the element correctly.
     *
     *	@param Integer offsetX - offset position
     *	@param Integer offsetY - offset position
     *
     *
     * @public	
     */		
	setDragOffset : function(dragOffsetX,dragOffsetY)
	{
		this.dragOffsetX = dragOffsetX;
		this.dragOffsetY = dragOffsetY;
	}
	// }}}	
	,
	// {{{ hide()
    /**
     *	Hide the image
     *
     *
     * @public	
     */		
	hide : function()
	{
		// Call private hideDivElement method.
		this.__hideDivElement();
		return false;
		
	}
	// }}}
	,
	// {{{ setCloseLinkTxt()
    /**
     *	Set text for close link text
     *	
     *	@param String closeLinkTxt - Label of close link - If you pass in false or empty string, no close link will be displayed.
     *
     * @public	
     */			
	setCloseLinkTxt : function(closeLinkTxt)
	{
		this.closeLinkTxt = closeLinkTxt;
	}
	// }}}
	,
	// {{{ setLayoutCss()
    /**
     *	Specify new relative path/name to css file(default is image-enlarger.css)
     *	The complete path to this file will be the path set by the DHTMLSuite-config object + this value
     *	
     *	@param String newLayoutCss - Name (or path) to new css file
     *
     * @public	
     */			
	setLayoutCss : function(newLayoutCss)
	{
		this.layoutCSS = newLayoutCss;
	}
	// }}}
	,	
	// {{{ __createHTMLElements()
    /**
     *	Create html elements used by this widget
     *
     *
     * @private	
     */		
	__createHTMLElements : function()
	{
		var ind = this.objectIndex;
				
		// Create main div element. 
		this.divElement = document.createElement('DIV');
		this.divElement.className='DHTMLSuite_imageEnlarger';
		this.divElement.ondragstart = function(){ return false; };
		DHTMLSuite.commonObj.__addEventEl(this.divElement);
		
		document.body.appendChild(this.divElement);	
		
		this.divElInner = document.createElement('DIV');
		this.divElInner.className = 'DHTMLSuite_imageEnlarger_imageBox';
		this.divElement.appendChild(this.divElInner);
		
		// Create div element for the image
		this.divElementImageBox = document.createElement('DIV');
		this.divElInner.appendChild(this.divElementImageBox);	
		
		// Create transparent div
		this.transparentDiv = document.createElement('DIV');
		this.transparentDiv.className = 'DHTMLSuite_imageEnlarger_transparentDivs';
		document.body.appendChild(this.transparentDiv);
		this.transparentDiv.style.display='none';
		this.transparentDiv.style.filter = 'alpha(opacity=' + this.msieOpacity + ')';
		DHTMLSuite.commonObj.addEvent(window,'resize',function(){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__resizeTransparentDiv(); });
		
		// Create close button
		var closeButton = document.createElement('DIV');
		closeButton.className = 'DHTMLSuite_imageEnlarger_close';
		closeButton.onmouseover = this.__mouseOverEffectCloseButton;
		closeButton.onmouseout = this.__mouseoutCalendarButton;
		closeButton.onclick = function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].hide(); };
		DHTMLSuite.commonObj.__addEventEl(closeButton);
		this.divElInner.appendChild(closeButton);	
		
		// Create caption
		this.captionDiv = document.createElement('DIV');
		this.captionDiv.className = 'DHTMLSuite_imageEnlarger_caption';	
		this.divElInner.appendChild(this.captionDiv);	
		
		// Iframe element
		if(DHTMLSuite.clientInfoObj.isMSIE){
		
			this.iframeEl = document.createElement('<iframe frameborder=0 src="about:blank" scrolling="no">');
			this.iframeEl.className = 'DHTMLSuite_imageEnlarger_iframe';
			this.divElement.appendChild(this.iframeEl);
		}
		if(this.isDragable){
			setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__makeElementDragable()',1);
		}
	}
	// }}}
	,
	// {{{ __makeElementDragable()
    /**
     *	Make an element dragable
     *
     *
     * @private	
     */			
	__makeElementDragable : function()
	{
		try{
			this.dragObject = new DHTMLSuite.dragDropSimple({ elementReference: this.divElement, offsetX : this.dragOffsetX,offsetY: this.dragOffsetY,cloneNode:false });	
		}catch(e){
			alert('You need to include DHTMLSuite-dragDropSimple.js for the drag feature');
		}	
	}
	// }}}
	,
	// {{{ __createHTMLElements()
    /**
     *	Create html elements used by this widget
     *
     *
     * @private	
     */		
	__mouseOverEffectCloseButton : function()
	{
		this.className = 'DHTMLSuite_imageEnlarger_closeOver';
	}
	,
	// {{{ __createHTMLElements()
    /**
     *	Create html elements used by this widget
     *
     *
     * @private	
     */		
	__mouseoutCalendarButton : function()
	{
		this.className = 'DHTMLSuite_imageEnlarger_close';
	}
	// }}}
	,
	// {{{ __clearHTMLElement()
    /**
     *	Clear image tag from div
     *
     *
     * @private	
     */		
	__clearHTMLElement : function()
	{
		this.divElementImageBox.innerHTML = '';	
	}
	// }}}
	,
	// {{{ __displayDivElement()
    /**
     *	Display div elements for this widget
     *
     *
     * @private	
     */		
	__displayDivElement : function()
	{
	
		this.divElement.style.visibility = 'hidden';
		if(this.isModal)this.transparentDiv.style.display='block';
		if(this.iframeEl)this.iframeEl.style.display='block';
	}
	// }}}
	,
	// {{{ __hideDivElement()
    /**
     *	Hide div elements for this widget
     *
     *
     * @private	
     */		
	__hideDivElement : function()
	{
		DHTMLSuite.discardElement(this.divElement);
		DHTMLSuite.discardElement(this.transparentDiv);
		this.divElement = false
		/*
		this.divElement.style.visibility = 'hidden';
		this.transparentDiv.style.display='none';		
		
		if(this.iframeEl){
			this.iframeEl.style.display='none';
			this.iframeEl.style.height = '1px';
			this.iframeEl.style.width = '1px';				
		}	
		*/	
	}
	// }}}
	,
	// {{{ __resizeTransparentDiv()
    /**
     *	Resize transparent div according to document width and height
     *
     *
     * @private	
     */		
	__resizeTransparentDiv : function()
	{
		var ind = this.objectIndex;
		if(!this.resizeTransparentAllowed)return;
		this.resizeTransparentAllowed = false;
		var divHeight = Math.max(DHTMLSuite.clientInfoObj.getBrowserHeight(),document.documentElement.scrollHeight);
		var divWidth = Math.max(DHTMLSuite.clientInfoObj.getBrowserWidth(),document.documentElement.scrollWidth);		

		this.transparentDiv.style.width = divWidth + 'px';
		this.transparentDiv.style.height = divHeight + 'px';	
			
		setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].resizeTransparentAllowed=true',10);	
	}
	// }}}
	,
	// {{{ __addImageElement()
    /**
     *	Create img element
     *
     *	@param String imagePath - Path to image
     *
     * @private	
     */		
	__addImageElement : function(imagePath)
	{
		var ind = this.objectIndex;
		var img = document.createElement('IMG');
		this.divElementImageBox.appendChild(img);
		img.onresize = function(){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__repositionHTMLElement(); };
		img.onload = function(){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__repositionHTMLElement(); };
		DHTMLSuite.commonObj.__addEventEl(img);
		img.src = imagePath;		
	}
	// }}}
	,
	// {{{ __setCaptionText()
    /**
     *	Put title and caption into the caption div
     *
     *
     * @private	
     */		
	__setCaptionText : function(title,description)
	{
		var ind = this.objectIndex;
		var txt = '';
		if(title)txt = '<span class="DHTMLSuite_imageEnlarger_captionTitle">' + title + '</span>'
		if(description)txt = txt + '<span class="DHTMLSuite_imageEnlarger_captionDescription">' + description + '</span>';
		if(this.closeLinkTxt)txt = txt + '<a class="DHTMLSuite_imageEnlarger_closeLink" href="#" onclick="return DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].hide()">' + this.closeLinkTxt + '</a>';
		this.captionDiv.innerHTML = txt;	
	}
	// }}}
	,
	// {{{ __repositionHTMLElement()
    /**
     *	Reposition div elements when the image is fully loaded.
     *
     *
     * @private	
     */		
	__repositionHTMLElement : function(internalCall)
	{
		
		var ind = this.objectIndex;
		var imgs = this.divElementImageBox.getElementsByTagName('IMG');
		var img = imgs[0];
		this.divElementImageBox.style.width = img.width + 'px';	
		this.divElementImageBox.style.height = img.height + 'px';	

		this.divElement.style.width = (this.divElInner.offsetWidth) + 'px';
		this.divElement.style.height = (this.divElInner.offsetHeight) + 'px';

		this.divElInner.style.width = this.divElementImageBox.offsetWidth + 'px'; 
		this.divElInner.style.height = (this.divElementImageBox.offsetHeight + this.captionDiv.offsetHeight) + 'px';

		if(this.isDragable){
			this.divElement.style.left = (DHTMLSuite.clientInfoObj.getBrowserWidth()/2 - this.divElement.offsetWidth/2) + 'px';
			this.divElement.style.top = (DHTMLSuite.clientInfoObj.getBrowserHeight()/2 - this.divElement.offsetHeight/2) + 'px';
			this.divElement.style.marginLeft = '0px';
			this.divElement.style.marginTop = '0px';
			this.divElement.style.cursor = 'move';
			
		}else{
			this.divElement.style.marginLeft = Math.round(this.divElementImageBox.offsetWidth/2 *-1) + 'px';
			this.divElement.style.marginTop = Math.round(this.divElementImageBox.offsetHeight/2 *-1) + 'px';
		}
				
		
		if(this.iframeEl){
			this.iframeEl.style.width = this.divElInner.style.width;
			this.iframeEl.style.height = this.divElInner.style.height;			
		}	
		
		if(!internalCall){
			setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__repositionHTMLElement(true)',50);	
		}else this.divElement.style.visibility = 'visible';
	}
	
	
}


/*[FILE_START:dhtmlSuite-windowWidget.js] */
/************************************************************************************************************
*	DHTML window scripts
*
*	Created:						November, 26th, 2006
*	@class Purpose of class:		Store metadata about a window
*			
*	Css files used by this script:	window.css
*
*	Public methods of this class should NEVER be called after the window widget has been initalized. 
*
*	Demos of this class:			demo-window.html
*
* 	Update log:
*
************************************************************************************************************/
/**
* @constructor
* @class Purpose of class:	Save metadata about a window. (<a href="../../demos/demo-window.html" target="_blank">Demo</a>)
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
*/

DHTMLSuite.windowModel = function(arrayOfProperties)
{
	var id;							// Id of window.
	var title;						// Title of window
	var icon;						// Icon of window
	var isDragable;					// Window is dragable ? (default = true)
	var isResizable;				// Window is resizable ?
	var isMinimizable;				// Window is minimizable ?
	var isClosable;					// Window is closable
	var xPos;						// Current x position of window
	var yPos;						// Current y position of window
	var width;						// Current width of window
	var height;						// Current height of window	
	var cookieName;					// Name of cookie to store x,y,width,height,state,activeTab and zIndex
	var state;						// State of current window(minimized,closed etc.)
	var activeTabId;				// id of active tab
	var tabsVisible;				// Tabs are visible? If not, we will only show a simple window with content and no tabs.
	var zIndex;						// Current z-index of window.
	var minWidth;					// Minimum width of window
	var maxWidth;					// Maximum width of window
	var minHeight;					// Minimum height of window
	var maxHeight;					// Maximum height of window.
	var isVisible;					// Is window visible
	
	var callbackOnClose;			// Callback to execute on close
	var windowsTheme;			
	var windowContents;				// Array of DHTMLSuite.windowTabModel objects.	
	this.windowContents = new Array();
	this.isDragable = true;
	this.isMinimizable = true;
	this.isResizable = true;
	this.isClosable = true;
	this.windowsTheme = false;
	this.isVisible = true;
	
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();	// This line starts all the init methods
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file\n'+ e.message);
	}
		
	if(arrayOfProperties)this.__setInitialWindowProperties(arrayOfProperties);
	
}

DHTMLSuite.windowModel.prototype = {

	// {{{ createWindowModelFromMarkUp()
    /**
     *	Create window from HTML markup on your page.
     *
     *	@param Object - reference to HTML element on page. (id or a direct reference)
     *
     *	Example of markup:
	&lt;div id="myWindow2" windowProperties="windowsTheme:true,title:This is my window,resizable:true,closable:true,maxWidth:900,dragable:true,cookieName:myWindowCookie2,xPos:300,yPos:400,minWidth:405,minHeight:150,activeTabId:OtherWindow1"><BR>
		&lt;div id="OtherWindow1" class="DHTMLSuite_windowContent" tabProperties="tabTitle:Welcome"><BR>
			This is my first window.	<BR>
		&lt;/div><BR>
		&lt;div id="OtherWindow2" class="DHTMLSuite_windowContent" tabProperties="contentUrl:includes/pane-splitter-calendar-1.php,tabTitle:Calendar,active=1"><BR>
		&lt;/div><BR>
		&lt;div id="OtherWindow3" class="DHTMLSuite_windowContent" tabProperties="contentUrl:includes/pane-splitter-paypal.inc,tabTitle:Support us"><BR>
		&lt;/div><BR>
		&lt;div id="OtherWindow4" class="DHTMLSuite_windowContent" tabProperties="contentUrl:includes/pane-splitter-classes.inc,tabTitle:DHTMLSuite classes"><BR>
		&lt;/div><BR>
	&lt;/div>
     *
     *	Note that each tab got class name "DHTMLSuite_windowContent". Also notice that the ids are separated from the property list. Properties are set by a comma separated list of
     *	key:value
     *	
     * @public	
     */			
	createWindowModelFromMarkUp : function(referenceToHTMLElement)
	{
		referenceToHTMLElement = DHTMLSuite.commonObj.getEl(referenceToHTMLElement);	
		if(!referenceToHTMLElement){
			alert('Error in windowModel class - Could not get a reference to element ' + referenceToHTMLElement);
			return;
		}			
		this.id = referenceToHTMLElement.id;
		var properties = referenceToHTMLElement.getAttribute('windowProperties');
		if(!properties)properties = referenceToHTMLElement.windowProperties;
		this.__setInitialWindowProperties(DHTMLSuite.commonObj.getAssociativeArrayFromString(properties));				
		/* Parse properties of main div */			
		var subDivs = referenceToHTMLElement.getElementsByTagName('DIV');
		for(var no=0;no<subDivs.length;no++){
			if(subDivs[no].className.toLowerCase()=='dhtmlsuite_windowcontent'){	/* Window found */
				var index = this.windowContents.length;
				this.windowContents[index] = new DHTMLSuite.windowTabModel();
				this.windowContents[index].__createContentModelFromHTMLElement(subDivs[no]);			
			}				
		}		
	}
	// }}}
	,	
	// {{{ __setInitialWindowProperties()
    /**
     *Save initial window properties sent to the constructor
     *	
     *	@param Array arrayOfProperties - Array of window properties
     *								 
     * @private	
     */		
	__setInitialWindowProperties : function(props)
	{
		if(props.isClosable)props.isClosable=eval(props.isClosable);
		if(props.isDragable)props.isDragable=eval(props.isDragable);
		if(props.isResizable)props.isResizable=eval(props.isResizable);
		if(props.isMinimizable)props.isMinimizable=eval(props.isMinimizable);
		if(props.isVisible)props.isVisible=eval(props.isVisible);
		
		if(props.cookieName)this.cookieName=props.cookieName;
		if(props.title)this.title=props.title;
		if(props.icon)this.icon=props.icon;
		if(props.width)this.width=props.width;
		if(props.height)this.height=props.height;
		
		if(props.isMinimizable || props.isMinimizable===false || props.isMinimizable===0)this.isMinimizable=props.isMinimizable;
		if(props.isClosable || props.isClosable==false)this.isClosable=props.isClosable;
		if(props.state)this.state=props.state;
		if(props.xPos)this.xPos=props.xPos;
		if(props.yPos)this.yPos=props.yPos;
		if(props.activeTabId)this.activeTabId=props.activeTabId;
		if(props.minWidth)this.minWidth=props.minWidth;
		if(props.maxWidth)this.maxWidth=props.maxWidth;
		if(props.minHeight)this.minHeight=props.minHeight;
		if(props.maxHeight)this.maxHeight=props.maxHeight;
		if(props.windowsTheme)this.windowsTheme=props.windowsTheme;
		if(props.callbackOnClose)this.callbackOnClose=props.callbackOnClose;

		if(props.isResizable || props.isResizable==false)this.isResizable=props.isResizable;
		if(props.isDragable || props.isDragable==false)this.isDragable=props.isDragable;
		if(props.isVisible || props.isVisible==false)this.isVisible=props.isVisible;

		
	}
	// }}}
	,
	// {{{ __getTitle()
    /**
     * Return title of window
     *								 
     * @private	
     */	
	__getTitle : function()
	{
		return this.title;
	}
	// }}}
	,
	// {{{ __getContentObjects()
    /**
     * Return an array of window content objects.
     *								 
     * @private	
     */		
	__getContentObjects : function()
	{
		return this.windowContents;
	}
	// }}}
	,
	// {{{ __setActiveTabIdAutomatically()
    /**
     * Automatically set active tab id.
     *								 
     * @private	
     */		
	__setActiveTabIdAutomatically : function()
	{
		for(var no=0;no<this.windowContents.length;no++){
			if(!this.windowContents[no].isDeleted){
				this.activeTabId = this.windowContents[no].id;
				return;
			}		
		}		
	}
	// }}}
	,
	// {{{ __setContentUrl()
    /**
     * Set new url of content
     *								 
     * @private	
     */		
	__setContentUrl : function(contentId,url)
	{
		for(var no=0;no<this.windowContents.length;no++){
			if(this.windowContents[no].id==contentId){
				this.windowContents[no].__setContentUrl(url);
				return true;
			}
		}
		return false;	
	}
	// }}}
	,
	// {{{ __getContentObjectById()
    /**
     * Return content object from id.
     *								 
     * @private	
     */		
	__getContentObjectById : function(contentId)
	{
		for(var no=0;no<this.windowContents.length;no++){
			if(this.windowContents[no].id==contentId)return this.windowContents[no];
		}
		return false;			
	}
	// }}}
	,
	// {{{ __setWidth()
    /**
     * Set new width of window
     *	@param Integer width.
     *								 
     * @private	
     */		
	__setWidth : function(newWidth)
	{
		if(this.minWidth && newWidth/1<this.minWidth/1)newWidth = this.minWidth;
		if(this.maxWidth && newWidth/1>this.maxWidth/1)newWidth = this.maxWidth;
		this.width = newWidth;
	}
	// }}}
	,
	// {{{ __setHeight()
    /**
     * Set new height of window
     *	@param Integer height.
     *								 
     * @private	
     */		
	__setHeight : function(newHeight)
	{
		if(this.minHeight && newHeight/1<this.minHeight/1)newHeight = this.minHeight;
		if(this.maxHeight && newHeight/1>this.maxHeight/1)newHeight = this.maxHeight;
		this.height = newHeight;
	}
	// }}}
	,
	// {{{ __setXPos()
    /**
     * Set new x position of window
     *	@param Integer xPos in pixels.
     *								 
     * @private	
     */		
	__setXPos : function(newXPos)
	{
		if(newXPos>DHTMLSuite.clientInfoObj.getBrowserWidth()){
			newXPos = DHTMLSuite.clientInfoObj.getBrowserWidth()-30;	
		}		
		this.xPos = newXPos;
	}
	// }}}
	,
	// {{{ __setYPos()
    /**
     * Set new y position of window
     *	@param Integer yPos in pixels.
     *								 
     * @private	
     */		
	__setYPos : function(newYPos)
	{
		if(newYPos>DHTMLSuite.clientInfoObj.getBrowserHeight()){
			newYPos = DHTMLSuite.clientInfoObj.getBrowserHeight()-30;	
		}			
		this.yPos = newYPos;
	}
	// }}}
	,
	// {{{ __setActiveTabId()
    /**
     * Set new active tab id.
     *	@param String newActiveTabId
     *								 
     * @private	
     */			
	__setActiveTabId : function(newActiveTabId)
	{
		var index = this.__getIndexOfTabById(newActiveTabId);
		if(index!==false && !this.__getIsDeleted(newActiveTabId)){			
			this.activeTabId = newActiveTabId;
			return;
		}
		this.__setActiveTabIdAutomatically();		
	}
	// }}}
	,
	// {{{ __setZIndex()
    /**
     * Set new z-index of window
     *	@param Integer zIndex
     *								 
     * @private	
     */		
	__setZIndex : function(zIndex)
	{
		this.zIndex = zIndex;
	}
	// }}}
	,
	// {{{ __setState()
    /**
     * Set new state of window
     *	@param String state
     *								 
     * @private	
     */		
	__setState : function(state)
	{
		this.state = state;
	}
	// }}}
	,
	// {{{ __getWidth()
    /**
     * Return width of window
     *								 
     * @private	
     */		
	__getWidth : function()
	{
		return this.width;
	}
	// }}}
	,
	// {{{ __getWidth()
    /**
     * Return width of window
     *								 
     * @private	
     */		
	__getHeight : function()
	{
		return this.height;
	}
	// }}}
	,
	// {{{ __getXPos()
    /**
     * Return xPos of window
     *								 
     * @private	
     */		
	__getXPos : function()
	{
		if(this.xPos>DHTMLSuite.clientInfoObj.getBrowserWidth()){
			xPos = DHTMLSuite.clientInfoObj.getBrowserWidth()-30;	
		}
		return this.xPos;
	}
	// }}}
	,
	// {{{ __getYPos()
    /**
     * Return yPos of window
     *								 
     * @private	
     */		
	__getYPos : function()
	{
		return this.yPos;
	}
	// }}}
	,
	// {{{ __getActiveTabId()
    /**
     * Return active tab id
     *								 
     * @private	
     */		
	__getActiveTabId : function()
	{
		return this.activeTabId;
	}
	// }}}
	,
	// {{{ __getZIndex()
    /**
     * Return z-index of window
     *								 
     * @private	
     */		
	__getZIndex : function()
	{
		if(!this.zIndex)return 0;
		return this.zIndex;
	}
	// }}}
	,
	// {{{ __getState()
    /**
     * Return state of window
     *								 
     * @private	
     */		
	__getState : function()
	{
		return this.state;
	}
	// }}}
	,
	// {{{ __deleteTab()
    /**
     * delete a tab
     *	@param String id of tab to delete
     *								 
     * @private	
     */		
	__deleteTab : function(idOfTab)
	{
		var index = this.__getIndexOfTabById(idOfTab);
		if(index!==false){
			this.windowContents[index].__setDeleted(true);
			return true;
		}
		return false;		
	}
	// }}}
	,
	// {{{ __restoreTab()
    /**
     * Restore a deleted tab
     *	@param String id of tab to restore.
     *								 
     * @private	
     */		
	__restoreTab : function(idOfTab)
	{
		var index = this.__getIndexOfTabById(idOfTab);
		if(index!==false){
			this.windowContents[index].__setDeleted(false);
			return true;
		}
		return false;	
	}
	// }}}
	,
	// {{{ __getIndexOfTabById()
    /**
     * Return index of tab by id
     *	@param String idOfTab
     *								 
     * @private	
     */		
	__getIndexOfTabById : function(idOfTab)
	{
		for(var no=0;no<this.windowContents.length;no++){
			if(this.windowContents[no].id==idOfTab)return no;
		}		
		return false;
	}
	// }}}
	,
	// {{{ __getIsDeleted()
    /**
     * Return true if tab is flagged as deleted
     *								 
     * @private	
     */		
	__getIsDeleted : function(idOfTab)
	{
		var index = this.__getIndexOfTabById(idOfTab);
		if(index!==false){
			return this.windowContents[index].isDeleted;
		}
	}
	// }}}
	,
	// {{{ addTab()
    /**
     * Add a new tab to the model
     *
     *	@return A reference to the model or false if a tab with the specified id already exists.
     *								 
     * @public	
     */		
	addTab : function(properties)
	{
		for(var no=0;no<this.windowContents.length;no++){	// Check if the window already exists.
			if(this.windowContents[no].id==properties.id)return false;			
		}
		var newIndex = this.windowContents.length;
		this.windowContents[newIndex] = new DHTMLSuite.windowTabModel(properties);
		return this.windowContents[newIndex];
	}
}

/************************************************************************************************************
*	DHTML window scripts
*
*	Created:						November, 26th, 2006
*	@class Purpose of class:		Store metadata about the content of a window or only a tab of a window.
*									
*			
*	Css files used by this script:	
*
*	Demos of this class:			demo-window.html
*
* 	Update log:
*
************************************************************************************************************/

DHTMLSuite.windowTabModel = function(tabProperties)
{
	var tabTitle;
	var textContent;
	var id;	
	var htmlElementId;
	var contentUrl;
	var isDeleted;
	var overflow;
	
	this.overflow = 'auto';
	if(tabProperties)this.__setInitProps(tabProperties);
}

DHTMLSuite.windowTabModel.prototype = 
{
	// {{{ __createContentModelFromHTMLElement()
    /**
     * Parse HTML element and get attributes from it.
     *								 
     * @private	
     */			
	__createContentModelFromHTMLElement : function(elementReference)
	{
		elementReference = DHTMLSuite.commonObj.getEl(elementReference);			
		this.textContent = elementReference.innerHTML;
		var properties = elementReference.getAttribute('tabProperties');
		if(!properties)properties = referenceToHTMLElement.tabProperties;		
		this.id = elementReference.id;
		this.htmlElementId = elementReference.id;
		this.__setInitProps(DHTMLSuite.commonObj.getAssociativeArrayFromString(properties));	
		
	}	
	// }}}
	,
	// {{{ __setInitProps()
    /**
     * Set initial tab properties
     *								 
     * @private	
     */		
	__setInitProps : function(arrayOfProperties)
	{		
		if(arrayOfProperties.tabTitle)this.tabTitle = arrayOfProperties.tabTitle;	
		if(arrayOfProperties.contentUrl)this.contentUrl = arrayOfProperties.contentUrl;	
		if(arrayOfProperties.id)this.id = arrayOfProperties.id;
		if(arrayOfProperties.textContent)this.textContent = arrayOfProperties.textContent;
		if(arrayOfProperties.htmlElementId)this.htmlElementId = arrayOfProperties.htmlElementId;
		if(arrayOfProperties.isDeleted)this.htmlElementId = arrayOfProperties.isDeleted;
		if(arrayOfProperties.overflow)this.overflow = arrayOfProperties.overflow;	
		if(this.id && !this.htmlElementId)this.htmlElementId = this.id;	
				
	}
	// }}}
	,
	// {{{ __setContentUrl()
    /**
     * Set url of tab
     *	@param String url
     *								 
     * @private	
     */		
	__setContentUrl : function(url)
	{
		this.contentUrl = url;
	}
	// }}}
	,
	// {{{ __setDeleted()
    /**
     * Specify if tab is deleted or not
     *	@param Boolean isDeleted
     *								 
     * @private	
     */		
	__setDeleted : function(isDeleted)
	{
		this.isDeleted = isDeleted;
	}
	
}

/**
* @constructor
* @class Create a window widget.
*			
* @param Object windowModel - object of class DHTMLSuite.windowModel
* @version				1.0
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
**/

DHTMLSuite.windowWidget = function(windowModel)
{
	var windowModel;	
	var layoutCSS;
	var objectIndex;
	
	var divElement;					// parent element of divElInner and eventual iframe(old MSIE)
	var divElInner;			// Div element for all the content of an iframe
	var divTitleBar;				// Div element for the title bar.
	var divElContent;			// Div for the content 
	var divCloseButton;				// Close button
	var divMinimizeButton;			// Minimize button
	var divStatusBarTxt;			// Text element in status bar
	var divTitleIcon;				// Icon div
	var divResizeHandle;			// Div element for the resize handle
	var iframeEl;				// Iframe element used to cover select boxes in IE.
	var divElementTitle_txt;
	var referenceToDragDropObject;	// Reference to object of class dragDropSimple.
	var contentDivs;				// Array of div elements for the content
	var resizeObj;					// Reference to object of class DHTMLSuite.resize
	var slideSpeed;					// Slide speed when window is "sliding" into position by a windowCollection call.
	var layoutOffsetHeightForTheStatusBar;
	
	var scrollPositions;
	this.scrollPositions = new Object();	
	
	this.layoutOffsetHeightForTheStatusBar = 8;
	this.layoutCSS = 'window.css';
	this.contentDivs = new Object();	
	this.slideSpeed = 25;
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();	// This line starts all the init methods
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}	
	
	this.objectIndex = DHTMLSuite.variableStorage.arrayDSObjects.length;
	DHTMLSuite.variableStorage.arrayDSObjects[this.objectIndex] = this;

	if(windowModel)this.addWindowModel(windowModel);	
}

DHTMLSuite.windowWidget.prototype = {
	// {{{ show()
	/**
	*	Displays the window
	*
	*	@public
	*/
	show : function()
	{
		this.windowModel.isVisible = true;
		this.divElement.style.visibility='visible';
		this.divElement.style.display='block';
		if(this.iframeEl)this.iframeEl.style.visibility='visible';	
	}
	// }}}
	,	
	// {{{ addWindowModel()
    /**
     * Connect window widget with a DHTMLSuite.windowModel
     *	@param Object windowModel - Object of class DHTMLSuite.windowModel.
     *								 
     * @public	
     */		
	addWindowModel : function(windowModel)
	{
		this.windowModel = windowModel;
		if(windowModel.windowsTheme)this.setLayoutThemeWindows();
	}
	// }}}
	,
	// {{{ setLayoutThemeWindows()
    /**
     * Windows style theme.
     * @public	
     */			
	setLayoutThemeWindows : function()
	{
		this.setLayoutCss('window-theme-windows.css');
		this.layoutOffsetHeightForTheStatusBar=1;
	}
	// }}}
	,
	// {{{ appendContent()
    /**
     * Append content to the window
     * @public	
     */		
    appendContent : function(idOfTab,contentReference)
	{
		contentReference = DHTMLSuite.commonObj.getEl(contentReference);
		try{
			document.getElementById(idOfTab).appendChild(contentReference);
		}catch(e){
		
		}	
	}
	// }}}
	,
	// {{{ setLayoutCss()
    /**
     * Specify new css file for the window. default is window/window.css ( located inside the css_dhtmlsuite folder)
     * @public	
     */		
	setLayoutCss : function(cssFileName)
	{
		this.layoutCSS = cssFileName;
		if(cssFileName=='window-theme-windows.css')this.layoutOffsetHeightForTheStatusBar=1;
	}
	// }}}
	,
	// {{{ setStatusBarText()
    /**
     * Specify a text in the status bar
     *	@param String statusbar text
     * @public	
     */		
	setStatusBarText : function(text)
	{
		this.divStatusBarTxt.innerHTML = text;
	}
	// }}}
	,
	// {{{ setSlideSpeed()
    /**
     * Specify a text in the status bar
     *	@param Integer - slidespeed ( default = 25 ) - This property is only used when a windowCollection is cascading or tiling windows.
     * @public	
     */		
	setSlideSpeed : function(slideSpeed)
	{
		this.slideSpeed = slideSpeed;
	}
	// }}}
	,
	// {{{ init()
    /**
     * Initializes the widget.
	 *
     * @public	
     */			
	init : function()
	{
		var ind = this.objectIndex;
		DHTMLSuite.commonObj.loadCSS(this.layoutCSS);
		this.__getWindowPropertiesFromCookie();
		if(!this.windowModel.activeTabId)this.windowModel.__setActiveTabIdAutomatically();
		this.__createPrimaryDivElements();
		this.__createiframeEl();
		this.__createTitleBar();
		this.__createTabRow();
		this.__createContentArea();
		this.__createStatusBar();		
		this.__initiallyPopulateContentArea();
		this.__displayActiveContent();		
		this.__populateTabRow();		
		this.__populateTitleBar();		
		this.__showHideButtonElements();
		this.__makeWindowDragable();
		this.__makeWindowResizable();
		this.__initiallySetPositionAndSizeOfWindow();		
		setTimeout("DHTMLSuite.variableStorage.arrayDSObjects[" +ind + "].__setSizeOfDivElements()",200);
		setTimeout("DHTMLSuite.variableStorage.arrayDSObjects[" +ind + "].__setSizeOfDivElements()",500);
		setTimeout("DHTMLSuite.variableStorage.arrayDSObjects[" +ind + "].__setSizeOfDivElements()",1000);
		setTimeout("DHTMLSuite.variableStorage.arrayDSObjects[" +ind + "].__setSizeOfDivElements()",2000);
	}
	// }}}
	,
	// {{{ loadContent()
    /**
     * The purpose of this method is to load content into a tab	 
     *
	 *	@param String - id of content object/tab
	 *	@param url - Url to load into the tab.
     * @public	 
     */			
	loadContent : function(idOfWindowContentObject,url)
	{
		this.windowModel.__setContentUrl(idOfWindowContentObject,url);
		try{
			var dynContent = new DHTMLSuite.dynamicContent();
		}catch(e){
			alert('You need to include dhtmlSuite-dynamicContent.js');
		}
		var ref = this.windowModel.__getContentObjectById(idOfWindowContentObject);		
		if(ref)dynContent.loadContent(ref.htmlElementId,url);
	}
	// }}}
	,
	/* Activate a different tab */
	// {{{ activateTab()
    /**
     * Make a specific tab active
     *
	 *	@param String - id of content object/tab
     * @public	
     */		
	activateTab : function(idOfContent)
	{
		var c = this.__getActiveContentElement();

		this.scrollPositions[this.windowModel.activeTabId] = c.parentNode.scrollTop;
		this.windowModel.__setActiveTabId(idOfContent);
		this.__setLayoutOfTabs();
		this.__displayActiveContent();
		this.__saveCookie();		
	}	
	// }}}
	,
	// {{{ setLayoutOffsetHeightForTheStatusBar()
    /**
     * This method is only needed in case you use a non-default css file
     *	It controls a tuning parameter used to set the correct height of the window(default value is 8)
     *
	 *	@param String - id of content object/tab
     * @public	
     */		
	setLayoutOffsetHeightForTheStatusBar : function(layoutOffsetHeightForTheStatusBar)
	{
		this.layoutOffsetHeightForTheStatusBar = layoutOffsetHeightForTheStatusBar;
	}
	// }}}
	,
	// {{{ deleteTab()
    /**
     * Delete a tab (ps! The tab can be restored by the restoreTab() method
     *
	 *	@param String - id of content object/tab
     * @public	
     */		
	deleteTab : function(idOfTab)
	{
		this.windowModel.__deleteTab(idOfTab);	
		if(this.windowModel.__getActiveTabId()==idOfTab)this.windowModel.__setActiveTabIdAutomatically();	
		this.__populateTabRow();
		this.__setLayoutOfTabs();
		this.__displayActiveContent();		
	}
	// }}}
	,
	// {{{ restoreTab()
    /**
     * Restore a deleted tab 
     *
	 *	@param String idOfTab - id of content object/tab
     * @public	
     */		
	restoreTab : function(idOfTab)
	{
		this.windowModel.__restoreTab(idOfTab);	
		this.__populateTabRow();
		this.__setLayoutOfTabs();
		this.__displayActiveContent();					
	}
	// }}}
	,
	// {{{ addTab()
    /**
     * Adds a new tab to the window
     *
	 *	@param Array tabProperties - Properties for the new tab(associative array with the keys: id,tabTitle,contentUrl(optional),textContent(optional),htmlElementId(optional) and isDeleted(optional)
     * @public	
     */		
	addTab : function(tabProperties)
	{
		var contentObj = this.windowModel.addTab(tabProperties);
		if(contentObj){
			this.__createContentForATab(contentObj);
			this.__populateTabRow();
			this.__setLayoutOfTabs();
			this.__displayActiveContent();	
		}		
	}
	// }}}
	,
	// {{{ setWidthOfWindow()
    /**
     * Set new width of window
     *
	 *	@param Integer width - New width of window. NB! Not larger than eventual set maxWidth
     * @public	
     */		
	setWidthOfWindow : function(newWidth)
	{
		this.windowModel.__setWidth(newWidth);
		this.divElement.style.width = this.windowModel.__getWidth() + 'px';
		this.__updateWindowModel();				
	}
	// }}}
	,
	// {{{ setHeightOfWindow()
    /**
     * Set new height of window
     *
	 *	@param Integer height - New height of window. NB! Not larger than eventual set maxHeight
     * @public	
     */		
	setHeightOfWindow : function(newHeight)
	{
		this.windowModel.__setHeight(newHeight);
		this.divElement.style.height = this.windowModel.__getHeight() + 'px';
		this.__setSizeOfDivElements();
		this.__updateWindowModel();		
	}
	// }}}
	,	
	// {{{ __createPrimaryDivElements()
    /**
     * Create main div elements for the widget
     *
     * @private	
     */		
	__createPrimaryDivElements : function()
	{		
		this.divElement = document.createElement('DIV');		
		this.divElement.className = 'DHTMLSuite_window';
		document.body.appendChild(this.divElement);		
		if(!this.windowModel.isVisible)this.divElement.style.visibility='hidden';
		this.divElInner = document.createElement('DIV');
		this.divElInner.className = 'DHTMLSuite_windowInnerDiv';
		this.divElInner.style.position = 'relative';
		this.divElInner.style.left = '0px';
		this.divElInner.style.top = '0px';
		this.divElInner.style.zIndex = 5;
		this.divElement.appendChild(this.divElInner);
	}
	// }}}
	,
	// {{{ __createiframeEl()
    /**
     * Create iframe element for the widget - used to cover select boxes in IE.
     *
     * @private	
     */		
	__createiframeEl : function()
	{
		if(DHTMLSuite.clientInfoObj.isMSIE){
			this.iframeEl = document.createElement('<IFRAME src="about:blank" frameborder=0>');
			this.iframeEl.style.position = 'absolute';
			this.iframeEl.style.top = '0px';
			this.iframeEl.style.left = '0px';
			this.iframeEl.style.width = '105%';
			this.iframeEl.style.height = '105%';
			this.iframeEl.style.zIndex = 1;
			this.iframeEl.style.visibility = 'visible';	
			if(!this.windowModel.isVisible)this.iframeEl.style.visibility='hidden';	
			this.divElement.appendChild(this.iframeEl);
		}		
	}
	// }}}
	,
	// {{{ __createTitleBar()
    /**
     * Create title bar element
     *
     * @private	
     */	
	__createTitleBar : function()
	{
		var ind = this.objectIndex;
		
		this.divTitleBar = document.createElement('DIV');	// Creating title bar div
		this.divTitleBar.className = 'DHTMLSuite_windowTitleBar';
		this.divElInner.appendChild(this.divTitleBar);
		
		var buttonDiv = document.createElement('DIV');		// Creating parent div for buttons
		buttonDiv.className = 'DHTMLSuite_windowButtonDiv';
		this.divTitleBar.appendChild(buttonDiv);
		
		if(this.windowModel.icon){
			var iconDiv = document.createElement('DIV');
			iconDiv.style.position = 'absolute';
			iconDiv.className = 'DHTMLSuite_windowIcon';
			iconDiv.style.backgroundImage = 'url("' + this.windowModel.icon + '")';
			iconDiv.style.backgroundPosition = 'left center';
			iconDiv.style.backgroundRepeat = 'no-repeat';
			iconDiv.style.left = '0px';
			iconDiv.style.top = '0px';
			var img = document.createElement('IMG');
			img.style.visibility='hidden';
			img.src = this.windowModel.icon;
			iconDiv.appendChild(img);
			this.divTitleIcon = iconDiv;
			this.divTitleBar.appendChild(iconDiv);
			setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__repositionTitleText()',50);
		}		
		
		this.divCloseButton = document.createElement('DIV');		// Creating close button
		this.divCloseButton.onmouseover = this.__mouseoverCloseButton;
		this.divCloseButton.onmouseout = this.__mouseoutCloseButton;
		this.divCloseButton.className='DHTMLSuite_windowCloseButton';
		this.divCloseButton.onclick = function(){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].close(); }
		this.divCloseButton.innerHTML = '<span></span>';
		buttonDiv.appendChild(this.divCloseButton);
		DHTMLSuite.commonObj.__addEventEl(this.divCloseButton);	

		if(this.windowModel.isMinimizable){
			this.divMinimizeButton = document.createElement('DIV');		// Creating minimize button
			this.divMinimizeButton.onmouseover = this.__mouseoverMinimizeButton;
			this.divMinimizeButton.onmouseout = this.__mouseoutMinimizeButton;
			this.divMinimizeButton.className='DHTMLSuite_windowMinimizeButton';
			this.divMinimizeButton.onclick = function(){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].minimizeWindow(); }
			this.divMinimizeButton.innerHTML = '<span></span>';
			buttonDiv.appendChild(this.divMinimizeButton);
			DHTMLSuite.commonObj.__addEventEl(this.divMinimizeButton);	
	
			this.divMaximizeButton = document.createElement('DIV');		// Creating maximize button
			this.divMaximizeButton.onmouseover = this.__mouseoverMaximizeButton;
			this.divMaximizeButton.onmouseout = this.__mouseoutMaximizeButton;
			this.divMaximizeButton.className='DHTMLSuite_windowMaximizeButton';
			this.divMaximizeButton.onclick = function(){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].maximizeWindow(); }
			this.divMaximizeButton.innerHTML = '<span></span>';
		
			buttonDiv.appendChild(this.divMaximizeButton);
			this.divMaximizeButton.style.display='none';
			DHTMLSuite.commonObj.__addEventEl(this.divMaximizeButton);	
		}	
		this.divElementTitle_txt = document.createElement('DIV');		// Creating div element holding the title text
		this.divElementTitle_txt.className = 'DHTMLSuite_windowTitleInTitleBar';
		this.divTitleBar.onselectstart = function() { return false; };
		this.divTitleBar.appendChild(this.divElementTitle_txt);	
		DHTMLSuite.commonObj.__addEventEl(this.divTitleBar);		
	}
	// }}}
	,
	// {{{ __repositionTitleText()
    /**
     * Reposition title text to fit the icon
     *
     * @private	
     */		
	__repositionTitleText : function()
	{
		this.divElementTitle_txt.style.marginLeft = (this.divTitleIcon.clientWidth) + 'px';
		
	}
	// }}}
	,
	// {{{ __createTabRow()
    /**
     * Create tab row
     *
     * @private	
     */	
	__createTabRow : function()
	{
		this.divElementTabRow = document.createElement('DIV');
		this.divElementTabRow.className = 'DHTMLSuite_windowTabRow';
		this.divElInner.appendChild(this.divElementTabRow);
		
	}
	// }}}
	,
	// {{{ __createContentArea()
    /**
     * Create content area
     *
     * @private	
     */	
	__createContentArea : function()
	{
		this.divElContent = document.createElement('DIV');
		this.divElContent.className = 'DHTMLSuite_windowContent';
		this.divElContent.style.overflow = 'auto';
		this.divElInner.appendChild(this.divElContent);		
	}
	// }}}
	,
	// {{{ __createStatusBar()
    /**
     * Create status bar div
     *
     * @private	
     */		
	__createStatusBar : function()
	{
		this.divStatusBar = document.createElement('DIV');
		this.divStatusBar.className = 'DHTMLSuite_windowStatusBar';
		this.divElInner.appendChild(this.divStatusBar);	
		
		this.divResizeHandle = document.createElement('DIV');
		this.divResizeHandle.className = 'DHTMLSuite_windowResizeHandle';
		this.divResizeHandle.innerHTML = '<span></span>';
		this.divStatusBar.appendChild(this.divResizeHandle);
		
		this.divStatusBarTxt = document.createElement('DIV');
		this.divStatusBarTxt.className = 'DHTMLSuite_windowStatusBarText';
		this.divStatusBar.appendChild(this.divStatusBarTxt);		
		
	}
	// }}}
	,
	// {{{ __populateTitleBar()
    /**
     * Populate title bar
     *
     * @private	
     */		
	__populateTitleBar : function()
	{
		this.divElementTitle_txt.innerHTML = this.windowModel.__getTitle();	
	}
	// }}}
	,
	// {{{ __populateTitleBar()
    /**
     * The purpose of this method is to initally populate content area with tab contents
     *
     * @private	
     */		
	__initiallyPopulateContentArea : function()
	{
		var contentObjects = this.windowModel.__getContentObjects();	// Get an array of content objects
		for(var no=0;no<contentObjects.length;no++){
			this.__createContentForATab(contentObjects[no]);
		}		
	}
	// }}}
	,
	// {{{ __createContentForATab()
    /**
     * Create or move div for a new tab.
     *
     *	@param Object contentObj - object of class windowTabModel
     *
     * @private	
     */		
	__createContentForATab : function(contentObj)
	{
		if(contentObj.htmlElementId){
			if(document.getElementById(contentObj.htmlElementId)){
				this.contentDivs[contentObj.id] = document.getElementById(contentObj.htmlElementId);										
			}else{
				this.contentDivs[contentObj.id] = document.createElement('DIV');
				this.contentDivs[contentObj.id].id = contentObj.htmlElementId;
			}	
			this.divElContent.appendChild(this.contentDivs[contentObj.id]);			
		}	
		if(contentObj.contentUrl){
			this.loadContent(contentObj.id,contentObj.contentUrl);
		}		
		if(contentObj.textContent){
			this.contentDivs[contentObj.id].innerHTML = contentObj.textContent;
		}	
		this.contentDivs[contentObj.id].className = 'DHTMLSuite_windowContentInner';
		this.contentDivs[contentObj.id].style.display='none';		
		
	}
	// }}}
	,
	// {{{ __getActiveContentElement()
    /**
     * Returns a reference to active content element
     *
     * @private	
     */		
	__getActiveContentElement : function()
	{
		var contentObjects = this.windowModel.__getContentObjects();	// Get an array of content objects
		for(var no=0;no<contentObjects.length;no++){
			if(contentObjects[no].id==this.windowModel.activeTabId){
				return this.contentDivs[contentObjects[no].id];
			}	
		}		
	}
	// }}}
	,
	// {{{ __populateTitleBar()
    /**
     * The purpose of this method is to display active content div
     *
     * @private	
     */		
	__displayActiveContent : function()
	{
		var contentObjects = this.windowModel.__getContentObjects();	// Get an array of content objects
		for(var no=0;no<contentObjects.length;no++){
			if(contentObjects[no].id==this.windowModel.activeTabId){
				this.contentDivs[contentObjects[no].id].style.display='block';
				if(this.scrollPositions[contentObjects[no].id]){
					this.contentDivs[contentObjects[no].id].parentNode.scrollTop = this.scrollPositions[contentObjects[no].id];					
				}
				try{
					this.divElContent.style.overflow = contentObjects[no].overflow;
				}catch(e){
				}
			}else{
				this.contentDivs[contentObjects[no].id].style.display='none';	
			}		
		}			
	}
	// }}}
	,
	// {{{ __populateTabRow()
    /**
     * The purpose of this method is to create the clickable tabs in the tab row. Finally, it calls the __setLayoutOfTabs which takes care of the styling based on active and inactive tabs
     *
     * @private	
     */		
	__populateTabRow : function()
	{
		var ind = this.objectIndex;
		
		this.divElementTabRow.innerHTML = '';	// Clear existing content from the tab row	
		var contentObjects = this.windowModel.__getContentObjects();	// Get an array of content objects
		
		if(DHTMLSuite.clientInfoObj.isMSIE){
			var table = document.createElement('<TABLE cellpadding="0" cellspacing="0" border="0">');
		}else{
			var table = document.createElement('TABLE');
			table.setAttribute('cellpadding',0);
			table.setAttribute('cellspacing',0);
			table.setAttribute('border',0);
		}
		
		this.divElementTabRow.appendChild(table);
		var tbody = document.createElement('TBODY');
		table.appendChild(tbody);
		var row = tbody.insertRow(0);
		for(var no=0;no<contentObjects.length;no++){
			if(!this.windowModel.__getIsDeleted(contentObjects[no].id)){
				var cell = row.insertCell(-1);
				cell.className = 'DHTMLSuite_windowATab';
				cell.id = 'windowTab_' + contentObjects[no].id;
				cell.setAttribute('contentId',contentObjects[no].id);
				cell.onclick = function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__activateTabByClick(e); };
				DHTMLSuite.commonObj.__addEventEl(cell);	
				var innerDiv = document.createElement('DIV');
				innerDiv.className = 'DHTMLSuite_windowATabInnerDiv';
				innerDiv.innerHTML = contentObjects[no].tabTitle;
				cell.appendChild(innerDiv);
			}
		}
		
		this.__setLayoutOfTabs();
	}	
	// }}}
	,
	// {{{ __clearActiveAndInactiveStylingFromTabs()
    /**
     * The purpose of this method is to clear added css classes from active and inactive tabs.
     *
     * @private	
     */	
	__clearActiveAndInactiveStylingFromTabs : function()
	{
		var cells = this.divElementTabRow.getElementsByTagName('TD');	// Get an array of <td> elements.
		var divs = this.divElementTabRow.getElementsByTagName('DIV');	// Get an array of <td> elements.
		for(var no=0;no<cells.length;no++){
			cells[no].className = cells[no].className.replace('DHTMLSuite_windowActiveTabCell','');
			cells[no].className = cells[no].className.replace('DHTMLSuite_windowInactiveTabCell','');		
			cells[no].style.left = '0px';	
		}		
		for(var no=0;no<divs.length;no++){
			divs[no].className = divs[no].className.replace(' DHTMLSuite_windowActiveTabCellContent','');
			divs[no].className = divs[no].className.replace(' DHTMLSuite_windowInactiveTabCellContent','');			
		}		
		
	}
	// }}}
	,
	// {{{ __clearActiveAndInactiveStylingFromTabs()
    /**
     * The purpose of this method is to set layout of active and inactive tabs in the tab row and also adjust the left position of each tab so that they overlap each other nicely
     *
     * @private	
     */		
	__setLayoutOfTabs : function()
	{
		this.__clearActiveAndInactiveStylingFromTabs();	// Clear layout of tab
		
		var cells = this.divElementTabRow.getElementsByTagName('TD');	// Get an array of <td> elements.
		var contentObjects = this.windowModel.__getContentObjects();	// Get an array of content objects
		
		var activeTabIndex = 0;
		
		for(var no=0;no<cells.length;no++){
			if(cells[no].id=='windowTab_' + this.windowModel.activeTabId){
				activeTabIndex = no;
				break;
			}			
		}		
		var leftPadding = 0;
		if(activeTabIndex>0){
			leftPadding = -7;	
		}
		cells[0].style.zIndex = 1;
		for(var no=1;no<activeTabIndex;no++){
			cells[no].style.left = leftPadding +'px';
			cells[no].style.zIndex = no+1;
			leftPadding-=7;			
	
		}

		
		for(var no=activeTabIndex;no<cells.length;no++){
			cells[no].style.left = leftPadding +'px';
			cells[no].style.zIndex = 100-no;
			leftPadding-=7;
		}
		
		cells[activeTabIndex].style.zIndex=200;

		
		for(var no=0;no<cells.length;no++){
			var div = cells[no].getElementsByTagName('DIV')[0];
			if(no==activeTabIndex){
				cells[no].className = cells[no].className + ' DHTMLSuite_windowActiveTabCell';
				div.className = div.className + ' DHTMLSuite_windowActiveTabCellContent';
			}else{
				cells[no].className = cells[no].className + ' DHTMLSuite_windowInactiveTabCell';	
				div.className = div.className + ' DHTMLSuite_windowInactiveTabCellContent';
			}
		}		
	}
	// }}}
	,
	// {{{ __setSizeOfDivElements()
    /**
     * Set size of content area relative to window size.
     *
     * @private	
     */		
	__setSizeOfDivElements : function()
	{
		try{
			this.divElContent.style.height = (this.divElement.clientHeight - (this.divTitleBar.offsetHeight + this.divStatusBar.offsetHeight + this.divElementTabRow.offsetHeight + this.layoutOffsetHeightForTheStatusBar)) + 'px';
			if(DHTMLSuite.clientInfoObj.isMSIE && DHTMLSuite.clientInfoObj.navigatorVersion<7){
				this.divElContent.style.width = this.divStatusBar.clientWidth + 'px';
			}
		}catch(e){
			this.divElContent.style.height = '1px';
		}
		
		try{
			if(this.windowModel.__getState()=='minimized')this.divElement.style.height = (this.divTitleBar.offsetHeight + this.divElementTabRow.offsetHeight + this.divStatusBar.offsetHeight) + 'px';
		}catch(e)
		{
		}
	}
	// }}}
	,
	// {{{ __activateTabByClick()
    /**
     * Click on tab
     *
     * @private	
     */		
	__activateTabByClick : function(e)
	{
		if(document.all)e = event;
		var src = DHTMLSuite.commonObj.getSrcElement(e);	
		if(src.tagName.toLowerCase()=='div')src = src.parentNode;
		var idOfContent = src.getAttribute('contentId');
		this.activateTab(idOfContent);
		
	}
	// }}}
	,
	// {{{ __updateWindowModel()
    /**
     * Update window model after resize, drag etc.
     *
     * @private	
     */		
	__updateWindowModel : function()
	{
		this.windowModel.__setWidth(this.divElement.style.width.replace('px','')/1);
		if(this.windowModel.__getState()!='minimized')this.windowModel.__setHeight(this.divElement.style.height.replace('px','')/1);
		this.windowModel.__setXPos(this.divElement.style.left.replace('px','')/1);
		this.windowModel.__setYPos(this.divElement.style.top.replace('px','')/1);	
		this.windowModel.__setZIndex(this.divElement.style.zIndex);	
		this.__saveCookie();
	}
	// }}}
	,	
	// {{{ __saveCookie()
    /**
     * The purpose of this function is to save cookies 
     *
     * @private	
     */		
	__saveCookie : function()
	{
		if(!this.windowModel.cookieName)return;
		var cookieValue = 'width:' + this.windowModel.__getWidth();
		cookieValue+=',height:' + this.windowModel.__getHeight();
		
		cookieValue+=',xPos:' + this.windowModel.__getXPos();
		cookieValue+=',yPos:' + this.windowModel.__getYPos();
		cookieValue+=',zIndex:' + this.divElement.style.zIndex;
		cookieValue+=',activeTabId:' + this.windowModel.__getActiveTabId();
		cookieValue+=',state:' + this.windowModel.__getState();
		DHTMLSuite.commonObj.setCookie(this.windowModel.cookieName,cookieValue,500);	
	}
	// }}}
	,
	// {{{ __getWindowPropertiesFromCookie()
    /**
     * Get window properties from cookie
     *
     * @private	
     */		
	__getWindowPropertiesFromCookie : function()
	{
		if(!this.windowModel.cookieName)return;	
		var cookieValue = DHTMLSuite.commonObj.getCookie(this.windowModel.cookieName);
		var propertyArray = DHTMLSuite.commonObj.getAssociativeArrayFromString(cookieValue);
		if(!propertyArray)return;
		if(propertyArray.width)this.windowModel.__setWidth(propertyArray.width);
		if(propertyArray.height)this.windowModel.__setHeight(propertyArray.height);
		if(propertyArray.xPos)this.windowModel.__setXPos(propertyArray.xPos);
		if(propertyArray.yPos)this.windowModel.__setYPos(propertyArray.yPos);
		if(propertyArray.zIndex)this.windowModel.__setZIndex(propertyArray.zIndex);
		if(propertyArray.state)this.windowModel.__setState(propertyArray.state);
		if(propertyArray.activeTabId)this.windowModel.__setActiveTabId(propertyArray.activeTabId);
	}
	// }}}
	,
	// {{{ __initiallySetPositionAndSizeOfWindow()
    /**
     * Set initial size and position of window.
     *
     * @private	
     */		
	__initiallySetPositionAndSizeOfWindow : function()
	{
		this.divElement.style.position='absolute';
			
		var width = this.windowModel.__getWidth();
		var height = this.windowModel.__getHeight();
		var xPos = this.windowModel.__getXPos();
		var yPos = this.windowModel.__getYPos();
		var zIndex = this.windowModel.__getZIndex();
		var state = this.windowModel.__getState();
		if(width && width!='0')this.divElement.style.width = width + 'px';
		if(height && height!='0')this.divElement.style.height = height + 'px';
		if(xPos)this.divElement.style.left = xPos + 'px';
		if(yPos)this.divElement.style.top = yPos + 'px';
		if(zIndex)this.divElement.style.zIndex = zIndex;
		if(state && state=='minimized')this.minimizeWindow();
		
	}
	// }}}
	,
	// {{{ __initiallySetPositionAndSizeOfWindow()
    /**
     * The purpose of this method is to figure out which tab was clicked an call the deleteTab method with the id of that tab as only argument
     *
     * @private	
     */		
	__deleteTabByClick : function()
	{		
		// NOT YET IMPLEMENTED
	}	
	// }}}
	,
	// {{{ __makeWindowResizable()
    /**
     * The purpose of this method is to make the window resizable
     *
     * @private	
     */		
	__makeWindowResizable : function()
	{
		if(!this.windowModel.isResizable){
			this.divResizeHandle.style.visibility='hidden';
			return;
		}
		var ind = this.objectIndex;
		try{
			this.resizeObj = new DHTMLSuite.resize({ minWidth:this.windowModel.minWidth,minHeight:this.windowModel.minHeight,maxWidth:this.windowModel.maxWidth,maxHeight:this.windowModel.maxHeight } );
		}catch(e){
			alert('You need to include dhtmlSuite-resize.js');
		}
		this.resizeObj.setElementRoResize(this.divElement);
		this.resizeObj.addResizeHandle(this.divResizeHandle,'southeast');
		this.resizeObj.setCallbackOnBeforeResize('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__isOkToResize');
		this.resizeObj.setCallbackOnAfterResize('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__updateWindowModel');
		this.resizeObj.setCallbackOnDuringResize('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__setSizeOfDivElements');
		this.resizeObj.init();		
		
		this.divStatusBarTxt.onselectstart = function() { return false; };
		this.divStatusBar.onselectstart = function() { return false; };
		
		DHTMLSuite.commonObj.__addEventEl(this.divStatusBarTxt);
		DHTMLSuite.commonObj.__addEventEl(this.divStatusBar);
		
	}
	// }}}
	,
	// {{{ __isOkToResize()
    /**
     * The purpose of this method is to return true or false if it's ok to resize the window(true if it's maximized, false if it's minimized)
     *
     * @private	
     */		
	__isOkToResize : function()
	{
		if(this.windowModel.__getState()=='minimized')return false;
		return true;
	}
	// }}}
	,
	// {{{ __makeWindowDragable()
    /**
     * Make window dragable if that option is true
     *
     * @private	
     */			
	__makeWindowDragable : function()
	{
		var ind = this.objectIndex;
		if(this.windowModel.isDragable){	// Add drag and drop features to the window.
			try{
				this.referenceToDragDropObject = new DHTMLSuite.dragDropSimple({ elementReference: this.divElement,cloneNode : false });	
			}catch(e){
				alert('You need to include dhtmlSuite-dragDropSimple.js');
			}
			this.referenceToDragDropObject.setCallbackOnAfterDrag('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__updateWindowModel');			
			this.referenceToDragDropObject.setCallbackOnBeforeDrag('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__updateWindowModel');			
			this.referenceToDragDropObject.addDragHandle(this.divTitleBar);
			this.divTitleBar.style.cursor = 'move';
			this.referenceToDragDropObject.__setNewCurrentZIndex(this.windowModel.__getZIndex());					
		}					
	}
	// }}}		
	,
	// {{{ deleteWindow()
    /**
     * Delete window, i.e. hide it
     *	@deprecated - use the close() method insetad
     *
     * @private	
     */		
	deleteWindow : function()
	{
		this.close();
	}
	// }}}
	,
	// {{{ close()
    /**
     * Closes window, i.e. hide it
     *
     * @public	
     */		
	close : function()
	{
		this.windowModel.isVisible = true;
		this.divElement.style.visibility='hidden';
		this.divElement.style.display='none';
		if(this.iframeEl)this.iframeEl.style.visibility='hidden';	
		this.__handleCallback('onClose');			
	}
	// }}}
	,
	// {{{ purge()
    /**
     * Removes the HTML for the windows from the DOM, i.e. the view.
     *
     * @public	
     */		
	purge : function()
	{
		DHTMLSuite.discardElement(this.divElement);
	}
	// }}}
	,
	// {{{ getDivElement()
    /**
     * Return main div element for this widget.
     *
     * @public	
     */		
	getDivElement : function()
	{
		return this.divElement;
	}
	// }}}
	,
	// {{{ restoreWindow()
    /**
     * Restore a deleted window, i.e. show it.
     *
     *	@deprecated - use show() instead.
     *
     * @public	
     */		
	restoreWindow : function()
	{
		this.show();
	}
	// }}}
	,
	// {{{ __handleCallback()
    /**
     * Execute callback action
     *
     *	@param String action - Callback action
     *
     * @private	
     */		
	__handleCallback : function(action)
	{
		var callbackString = '';
		switch(action){
			case "onClose":
				callbackString = this.windowModel.callbackOnClose;
				break;				
		}
		if(callbackString){
			var ind = this.objectIndex;
			callbackString = callbackString + '(DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '])';
			return eval(callbackString);			
		}		
	}
	// }}}
	,
	// {{{ minimizeWindow()
    /**
     * Minimize a window
     *
     * @public	
     */		
	minimizeWindow : function()
	{
		this.windowModel.__setState('minimized');
		
		this.divElContent.style.display='none';
		this.divStatusBar.style.display='none';
		this.divElementTabRow.style.display='none';
		
		this.divMinimizeButton.style.display='none';
		this.divMaximizeButton.style.display='block';
		this.__setSizeOfDivElements();
		this.__saveCookie();
	}
	// }}}
	,
	// {{{ maximizeWindow()
    /**
     * maximize a window
     *
     * @public	
     */		
	maximizeWindow : function()
	{
		this.windowModel.__setState('maximized');
		this.divElContent.style.display='block';
		this.divStatusBar.style.display='block';
		this.divElementTabRow.style.display='block';		
		this.divMinimizeButton.style.display='block';
		this.divMaximizeButton.style.display='none';
		this.divElement.style.height = this.windowModel.__getHeight() + 'px';
		this.__setSizeOfDivElements();
		this.__saveCookie();
	}
	// }}}
	,
	// {{{ slideWindowToXAndY()
    /**
     * Slide a window to a specific coordinate
     *
     *	Int toX - Slide to (x-coordinate in pixels)
     *	Int toY - Slide to (y-coordinate in pixels)
     *
     * @public	
     */			
	slideWindowToXAndY : function(toX,toY)
	{
		var slideFactors = this.__getSlideFactors(toX,toY);
		var slideDirections = this.__getSlideDirections(toX,toY);
		var slideTo = new Object();
		slideTo.x = toX;
		slideTo.y = toY;
		var currentPos = new Object();
		currentPos.x = this.windowModel.__getXPos();
		currentPos.y = this.windowModel.__getYPos();
		if(currentPos.x==slideTo.x && currentPos.y==slideTo.y)return;
		this.__performSlide(slideTo,currentPos,slideFactors,slideDirections);				
	}
	// }}}
	,
	// {{{ __performSlide()
    /**
     * Execute slide process
     *
     * @private	
     */		
	__performSlide : function(slideTo,currentPos,slideFactors,slideDirections)
	{
		var ind = this.objectIndex;
		currentPos.x = currentPos.x/1 + (this.slideSpeed * slideFactors.y * slideDirections.x);
		currentPos.y = currentPos.y/1 + (this.slideSpeed * slideFactors.x * slideDirections.y);
		
		repeatSlide = false;
		
		if(slideDirections.x<0){
			if(currentPos.x<=slideTo.x){
				currentPos.x = slideTo.x;
			}else{
				repeatSlide=true;
			}
		}else{
			if(currentPos.x>=slideTo.x){
				currentPos.x = slideTo.x;
			}else{
				repeatSlide=true;
			}
		}
		if(slideDirections.y<0){
			if(currentPos.y<=slideTo.y){
				currentPos.y = slideTo.y;
			}else{
				repeatSlide=true;
			}
		}else{
			if(currentPos.y>=slideTo.y){
				currentPos.y = slideTo.y;
			}else{
				repeatSlide=true;
			}
		}
		
		this.divElement.style.left = Math.round(currentPos.x) + 'px';
		this.divElement.style.top = Math.round(currentPos.y) + 'px';

		//alert('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__performSlide({x:' + slideTo.x + ',y:' + slideTo.y + '},{x:' + currentPos.x + ',y:' + currentPos.y + '},{x:' + slideFactors + ',y:' + slideFactors.y + '},{ x:' + slideDirections.x + ',y:' + slideDirections.y + '})');
		if(repeatSlide){
			setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__performSlide({x:' + slideTo.x + ',y:' + slideTo.y + '},{x:' + currentPos.x + ',y:' + currentPos.y + '},{x:' + slideFactors.x + ',y:' + slideFactors.y + '},{ x:' + slideDirections.x + ',y:' + slideDirections.y + '})',10); 
		}else{
			this.__updateWindowModel();	
		}
	}
	// }}}
	,
	// {{{ __getSlideFactors()
    /**
     * Return slide factor (x relative to y)
     *
     * @private	
     */		
	__getSlideFactors : function(toX,toY)
	{
		var retArray = new Object();
		
		var currentX = this.windowModel.__getXPos();
		var currentY = this.windowModel.__getYPos();
		
		var distance_x = Math.abs(toX-currentX);
		var distance_y = Math.abs(toY-currentY);
		
		if(distance_x<distance_y){
			retArray.x = distance_y/distance_x;
			retArray.y = 1;			
		}else{
			retArray.y = distance_x/distance_y;
			retArray.x = 1;					
		}
		return retArray;		
	}
	// }}}
	,
	// {{{ __getSlideDirections()
    /**
     * Return slide directions for the x and y axis( returns an associative array for x and y. value will be -1 or 1)
     *
     * @private	
     */		
	__getSlideDirections : function(toX,toY)
	{
		var retArray = new Object();
		if(toX<this.windowModel.__getXPos())retArray.x = -1; else retArray.x = 1;
		if(toY<this.windowModel.__getYPos())retArray.y = -1; else retArray.y = 1;
		return retArray;
	}
	// }}}
	,
	// {{{ __showHideButtonElements()
    /**
     * Show or hide button elements
     *
     * @private	
     */		
	__showHideButtonElements : function()
	{
		if(this.windowModel.isClosable)this.divCloseButton.style.display='block'; else this.divCloseButton.style.display='none';	
		
	}	
	// }}}
	,
	// {{{ __mouseoverButton()
    /**
     * Mouse over effect - buttons
     *
     * @private	
     */			
	__mouseoverCloseButton : function()
	{
		this.className = this.className + ' DHTMLSuite_windowCloseButtonOver';	
	}
	// }}}
	,
	// {{{ __mouseoutButton()
    /**
     * Mouse out effect - buttons
     *
     * @private	
     */		
	__mouseoutCloseButton : function()
	{
		this.className = this.className.replace(' DHTMLSuite_windowCloseButtonOver','');	
	}
	,
	// {{{ __mouseoverButton()
    /**
     * Mouse over effect - buttons
     *
     * @private	
     */			
	__mouseoverMinimizeButton : function()
	{
		this.className = this.className + ' DHTMLSuite_windowMinimizeButtonOver';	
	}
	// }}}
	,
	// {{{ __mouseoutButton()
    /**
     * Mouse out effect - buttons
     *
     * @private	
     */		
	__mouseoutMinimizeButton : function()
	{
		this.className = this.className.replace(' DHTMLSuite_windowMinimizeButtonOver','');	
	}
	,
	// {{{ __mouseoverButton()
    /**
     * Mouse over effect - buttons
     *
     * @private	
     */			
	__mouseoverMaximizeButton : function()
	{
		this.className = this.className + ' DHTMLSuite_windowMaximizeButtonOver';	
	}
	// }}}
	,
	// {{{ __mouseoutButton()
    /**
     * Mouse out effect - buttons
     *
     * @private	
     */		
	__mouseoutMaximizeButton : function()
	{
		this.className = this.className.replace(' DHTMLSuite_windowMaximizeButtonOver','');	
	}
	
}

DHTMLSuite.windowCollection = function()
{
	var windowWidgets;	
	var spaceBetweenEachWindowWhenCascaded;
	var numberOfColumnsWhenTiled;
	var divWindowsArea;							// Eventual div where the windows should be positioned
	this.windowWidgets = new Array();
	this.spaceBetweenEachWindowWhenCascaded = 20;
	this.numberOfColumnsWhenTiled = 2;
	
}

DHTMLSuite.windowCollection.prototype = 
{
	// {{{ addWindow()
    /**
     * Add a window to a window collection
     *	@param Object wnidowWidgetReference - object of class DHTMLSuite.windowWidget
     *
     * @public	
     */			
	addWindow : function(windowWidgetReference)	
	{
		this.windowWidgets[this.windowWidgets.length] = windowWidgetReference;
		
	}
	// }}}
	,
	// {{{ tile()
    /**
     * Tile all windows in collection.
     *
     * @public	
     */		
	tile : function()
	{
		this.windowWidgets = this.windowWidgets.sort(this.__sortItems);
		var browserWidth = DHTMLSuite.clientInfoObj.getBrowserWidth()-20;
		var browserHeight = DHTMLSuite.clientInfoObj.getBrowserHeight()-20;
		
		var offsetX = 10;
		var offsetY = 10;
		
		if(this.divWindowsArea){
			browserWidth = this.divWindowsArea.clientWidth;
			browserHeight = this.divWindowsArea .clientHeight;
			offsetX = DHTMLSuite.commonObj.getLeftPos(this.divWindowsArea);
			offsetY = DHTMLSuite.commonObj.getTopPos(this.divWindowsArea);
		}
				
		var windowWidth = Math.floor(browserWidth/this.numberOfColumnsWhenTiled);
		var windowHeight = Math.floor(browserHeight / Math.ceil(this.windowWidgets.length / this.numberOfColumnsWhenTiled));
		

		for(var no=0;no<this.windowWidgets.length;no++){
			this.windowWidgets[no].setWidthOfWindow(windowWidth);
			this.windowWidgets[no].setHeightOfWindow(windowHeight-5);
			var xPos = offsetX + (windowWidth * (no % this.numberOfColumnsWhenTiled));
			var yPos = offsetY + (windowHeight * Math.floor((no) / this.numberOfColumnsWhenTiled));
			this.windowWidgets[no].slideWindowToXAndY(xPos,yPos);
			
		}			
	}
	// }}}
	,
	// {{{ cascade()
    /**
     * Cascade all windows in collection.
     *
     * @public	
     */	
	cascade : function()
	{
		this.windowWidgets = this.windowWidgets.sort(this.__sortItems);
		var browserWidth = DHTMLSuite.clientInfoObj.getBrowserWidth() - 50;
		var browserHeight = DHTMLSuite.clientInfoObj.getBrowserHeight() - 50;
		
		var offsetX = 10;
		var offsetY = 10;		
		if(this.divWindowsArea){
			browserWidth = this.divWindowsArea.clientWidth;
			browserHeight = this.divWindowsArea .clientHeight;
			offsetX = DHTMLSuite.commonObj.getLeftPos(this.divWindowsArea);
			offsetY = DHTMLSuite.commonObj.getTopPos(this.divWindowsArea);
		}
		
		var windowWidth = browserWidth - ((this.windowWidgets.length-1) * this.spaceBetweenEachWindowWhenCascaded);
		var windowHeight = browserHeight - ((this.windowWidgets.length-1) * this.spaceBetweenEachWindowWhenCascaded);
		
		
		for(var no=0;no<this.windowWidgets.length;no++){
			this.windowWidgets[no].setWidthOfWindow(windowWidth);
			this.windowWidgets[no].setHeightOfWindow(windowHeight);
			this.windowWidgets[no].slideWindowToXAndY(offsetX + this.spaceBetweenEachWindowWhenCascaded*(no),offsetY + this.spaceBetweenEachWindowWhenCascaded*(no));
		}		
	}
	// }}}
	,
	// {{{ minimize()
    /**
     * Minimize all windows in the collection
     *
     * @public	
     */		
	minimize : function()
	{
		for(var no=0;no<this.windowWidgets.length;no++){
			this.windowWidgets[no].minimizeWindow();
		}		
	}
	// }}}
	,
	// {{{ maximize()
    /**
     * maximize all windows in the collection
     *
     * @public	
     */		
	maximize : function()
	{
		for(var no=0;no<this.windowWidgets.length;no++){
			this.windowWidgets[no].maximizeWindow();
		}		
	}
	// }}}
	,
	// {{{ setNumberOfColumnsWhenTiled()
    /**
     * Number of columns in "tile" mode
     *	@param Integer - number of columns ( default = 1 )
     *
     * @public	
     */		
	setNumberOfColumnsWhenTiled : function(numberOfColumnsWhenTiled)
	{
		this.numberOfColumnsWhenTiled = numberOfColumnsWhenTiled;
	}
	// }}}
	,
	// {{{ setDivWindowsArea()
    /**
     * Specify a HTML element where windows will be tiled or cascaded on, i.e. The windows will not go outside the boundaries of these elements when they are being cascaded or tiled.
     *	@param Object divWindowsArea - Id or direct reference to HTML element on your page.
     *
     * @public	
     */		
	setDivWindowsArea : function(divWindowsArea)
	{
		divWindowsArea = DHTMLSuite.commonObj.getEl(divWindowsArea);
		this.divWindowsArea = divWindowsArea;
	}
	// }}}
	,
	// {{{ __sortItems()
    /**
     *	Private sort method used to sort window widgets.
     *	
     * @private	
     */		
	__sortItems : function(a,b)
	{
		return a.windowModel.__getZIndex()/1-b.windowModel.__getZIndex()/1;
	}	
	
	
}

/*[FILE_START:dhtmlSuite-resize.js] */
/************************************************************************************************************
*	DHTML window scripts
*
*	Created:						January, 27th, 2006
*	@class Purpose of class:		Resize element widget
*			
*	Css files used by this script:	
*
*	Demos of this class:			demo-resize-1.html
*
* 	Update log:
*
************************************************************************************************************/
/**
* @constructor
* @class Resize widget
*		
* @param Array - Associative array of resize properties(possible keys: minWidth,maxWidth,minHeight,maxHeight,preserveRatio,callbackOnBeforeResize,callbackOnAfterResize,callbackOnDuringResize,resizeInWhichDirections)
* @version				1.0
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
**/
DHTMLSuite.resize = function(propertyArray)
{
	var resizeWhichElement;
	var resizeHandles;

	this.resizeHandles = new Array();
	var preserveRatio;
	var minWidth;
	var maxWidth;
	var minHeight;
	var maxHeight;
	var callbackOnBeforeResize;
	var callbackOnAfterResize;
	var callbackOnDuringResize;
	var resizeTimer;
	var resizeInWhichDirections;
	var resizeHandleelativePath;
	var objectIndex;
	
	var mouseStartPos;					// Position of mouse pointer when the resize process starts
	var initElementSize;
	var currentResizeDirection;			// In which direction are we currently resizing the element(example: "west","east","southeast")
	var classNameOfResizeHandles;		// Class name of resize handles, in case they are created dynamically
	var layoutCSS;
	var resizeHandlerOffsetInPixels;
	var elementToResizeIsAbsolutePositioned;
	var sizeOfWidthRelativeToHeight;
	
	
	this.minWidth = 0;
	this.minHeight = 0;
	this.maxWidth = 150000;
	this.maxHeight = 150000;
	this.classNameOfResizeHandles = 'DHTMLSuite_resize_handle';
	this.layoutCSS = 'resize.css';
	this.resizeHandleelativePath = 'resize/small_square.gif';
	this.resizeTimer = -1;
	this.mouseStartPos = new Object();
	this.initElementSize = new Object();
	this.resizeHandlerOffsetInPixels = 4;
	this.elementToResizeIsAbsolutePositioned = false;
	
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();	// This line starts all the init methods
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}	
	if(propertyArray)this.__setInitProps(propertyArray);
	
	this.objectIndex = DHTMLSuite.variableStorage.arrayDSObjects.length;
	DHTMLSuite.variableStorage.arrayDSObjects[this.objectIndex] = this;	
}
DHTMLSuite.resize.prototype = 
{
	// {{{ setLayoutCss()
    /**
     *	Specify new css file for the resize widget, default = resize.css
     *	
     * @public	
     */		
	setLayoutCss : function(cssFileName)
	{
		this.layoutCSS = cssFileName;
	}
	// }}}
	,
	// {{{ setLayoutCss()
    /**
     *	Specify new css file for the resize widget, default = resize.css
     *	
     * @private	
     */		
	setCssClassNameForResizeHandles : function(classNameOfResizeHandles)
	{
		this.classNameOfResizeHandles = classNameOfResizeHandles;
	}
	// }}}
	,	
	// {{{ setElementRoResize()
    /**
     *	Specify which element you want to resize
     *	
     *	@param Object elementReference - id or direct reference to HTML element(this element should be either absolute or relative positioned)
     *	
     * @public	
     */		
	setElementRoResize : function(elementReference)
	{
		elementReference = DHTMLSuite.commonObj.getEl(elementReference);
		this.resizeWhichElement = elementReference;				
	}
	// }}}
	,
	// {{{ addResizeHandle()
    /**
     *	Specify a sub element of the reized element which acts as a resize handle
     *	
     *	@param Object resizeHandle - id or direct reference to HTML element
     *	@param String direction - Resize direction(possible values "all", "south","west","east","north","northwest","northheast","southwest","southeast")
     *	
     * @public	
     */			
	addResizeHandle : function(resizeHandle,direction)
	{
		resizeHandle = DHTMLSuite.commonObj.getEl(resizeHandle);
		var index = this.resizeHandles.length;
		this.resizeHandles[index] = new Object();
		this.resizeHandles[index].element = resizeHandle;
		this.resizeHandles[index].direction = direction;				
	}
	// }}}
	,
	// {{{ setMinWidthInPixels()
    /**
     *	Specify minimum width
     *	
     *	@param Integer pixels - Minimum width of resized element in pixels. i.e. restrict the resize widget from making it smaller.
     *	
     * @public	
     */		
	setMinWidthInPixels : function(pixels)
	{
		this.minWidth = pixels;
		
	}
	// }}}
	,
	// {{{ setMaxWidthInPixels()
    /**
     *	Specify maximum width
     *	
     *	@param Integer pixels - Maximum width of resized element in pixels. i.e. restrict the resize widget from making it larger.
     *	
     * @public	
     */		
	setMaxWidthInPixels : function(pixels)
	{
		this.maxWidth = pixels;
	}
	// }}}
	,
	// {{{ setMinHeightInPixels()
    /**
     *	Specify minimum width
     *	
     *	@param Integer pixels - minimum width of resized element in pixels. i.e. restrict the resize widget from making it smaller.
     *	
     * @public	
     */	
	setMinHeightInPixels : function(pixels)
	{
		this.minHeight = pixels;
	}
	// }}}
	,
	// {{{ setMaxHeightInPixels()
    /**
     *	Specify maximum height
     *	
     *	@param Integer pixels - maximum height of resized element in pixels. i.e. restrict the resize widget from making it smaller.
     *	
     * @public	
     */	
	setMaxHeightInPixels : function(pixels)
	{
		this.maxHeight = pixels;
		
	}
	// }}}
	,
	// {{{ setCallbackOnBeforeResize()
    /**
     *	Specify name of call back function which will be executed before restarts starts
     *	
     *	@param String functionName - Only the name of the function to execute, example. "myCallbackFunction", a reference to this resize object will be sent as only argument to this function.
     *	
     * @public	
     */	
	setCallbackOnBeforeResize : function(functionName)
	{
		this.callbackOnBeforeResize = functionName;
	}
	// }}}
	,
	// {{{ setCallbackOnAfterResize()
    /**
     *	Specify name of call back function which will be executed when restarts ends(i.e. mouse up)
     *	
     *	@param String functionName - Only the name of the function to execute, example. "myCallbackFunction", a reference to this resize object will be sent as only argument to this function.
     *	
     * @public	
     */	
	setCallbackOnAfterResize : function(functionName)
	{
		this.callbackOnAfterResize = functionName;
	}
	// }}}
	,
	// {{{ setCallbackOnDuringResize()
    /**
     *	Specify name of call back function which will be executed during resize
     *	
     *	@param String functionName - Only the name of the function to execute, example. "myCallbackFunction", a reference to this resize object will be sent as only argument to this function.
     *	
     * @public	
     */	
	setCallbackOnDuringResize : function(functionName)
	{
		this.callbackOnDuringResize = functionName;		
	}
	// }}}
	,
	// {{{ setResizeHandlerOffsetInPixels()
    /**
     *	Specify offset in pixels for automatically created resize handles. If you don't add a resize handle manually, automatic resize handles will be created for you. These will be placed along the edge of the resizable element. You can move these handles by specifying an offset value.
     *	
     *	@param Integer offsetInPx - Offset in pixels
     *	
     * @public	
     */		
	setResizeHandlerOffsetInPixels : function(offsetInPx)
	{
		this.resizeHandlerOffsetInPixels = offsetInPx;		
	}
	// }}}
	,
	// {{{ setIsResizeElementAbsolutePositioned()
    /**
     *	Specify if resized element is absolute positioned.
     *	
     *	@param Boolean absolutePositioned - Is the resizable element absolute positioned on your page ?
     *	
     * @public	
     */	
	setIsResizeElementAbsolutePositioned : function(absolutePositioned)
	{
		this.elementToResizeIsAbsolutePositioned = absolutePositioned;
	}
	// }}}
	,
	// {{{ getReferenceToResizedElement()
    /**
     *	Returns a reference to the resizable element
     *	
     *	
     * @public	
     */	
	getReferenceToResizedElement : function()
	{
		return this.resizeWhichElement;
	}
	// }}}
	,
	// {{{ init()
    /**
     *	Initializes the widget. Call this method after you are finished with your set-method calls.
     *	
     *	
     * @public	
     */	
	init : function()
	{
		DHTMLSuite.commonObj.loadCSS(this.layoutCSS);
		this.__setAspectRatio();
		this.__createResizeHandlesAutomatically();
		this.__setCursorOfResizeHandles();
		this.__addEventsToResizeHandles();
		this.__addBasicEvents();
	}
	// }}}
	,
	// {{{ __setAspectRatio()
    /**
     *	Determine aspect ratio
     *	
     * @private	
     */	
	__setAspectRatio : function()
	{
		this.sizeOfWidthRelativeToHeight = this.resizeWhichElement.offsetWidth / this.resizeWhichElement.offsetHeight;		
	}
	// }}}
	,
	// {{{ __setInitProps()
    /**
     *	Save initial properties sent to the constructor
     *	@param Array - associative array of properties.
     *	
     * @private	
     */	
	__setInitProps : function(propertyArray)
	{
		if(propertyArray.minWidth)this.minWidth = propertyArray.minWidth;	
		if(propertyArray.maxWidth)this.maxWidth = propertyArray.maxWidth;	
		if(propertyArray.minHeight)this.minHeight = propertyArray.minHeight;	
		if(propertyArray.maxHeight)this.maxHeight = propertyArray.maxHeight;		
		if(propertyArray.preserveRatio)this.preserveRatio = propertyArray.preserveRatio;		
		if(propertyArray.callbackOnBeforeResize)this.callbackOnBeforeResize = propertyArray.callbackOnBeforeResize;		
		if(propertyArray.callbackOnAfterResize)this.callbackOnAfterResize = propertyArray.callbackOnAfterResize;		
		if(propertyArray.callbackOnDuringResize)this.callbackOnDuringResize = propertyArray.callbackOnDuringResize;		
		if(propertyArray.resizeInWhichDirections)this.resizeInWhichDirections = propertyArray.resizeInWhichDirections;		
	}
	// }}}
	,
	// {{{ __createResizeHandlesAutomatically()
    /**
     *	Create resize handles automatically.
     *	
     * @private	
     */	
	__createResizeHandlesAutomatically : function()
	{
		if(this.resizeHandles.length>0)return;
		if(!this.resizeInWhichDirections || this.resizeInWhichDirections=='all')this.resizeInWhichDirections = 'west,east,north,south,southeast,southwest,northwest,northeast';
		
		var directions = this.resizeInWhichDirections.split(/,/g);
		for(var no=0;no<directions.length;no++){
			this.resizeHandles[no] = new Object();
			this.resizeHandles[no].element = document.createElement('DIV');
			this.resizeHandles[no].element.className = this.classNameOfResizeHandles;
			this.resizeWhichElement.appendChild(this.resizeHandles[no].element);
			this.resizeHandles[no].direction = directions[no];
			var el = this.resizeHandles[no].element;
			el.style.position = 'absolute';
			el.style.top = '50%';
			el.style.left = '50%';
			if(directions[no].indexOf('west')>=0)el.style.left = (0-this.resizeHandlerOffsetInPixels) + 'px';
			if(directions[no].indexOf('east')>=0){
				el.style.right = (0-this.resizeHandlerOffsetInPixels) + 'px';
				el.style.left = '';
			}
			if(directions[no].indexOf('north')>=0)el.style.top = (0-this.resizeHandlerOffsetInPixels) + 'px';
			if(directions[no].indexOf('south')>=0){
				el.style.bottom = (0-this.resizeHandlerOffsetInPixels) + 'px';
				el.style.top = '';
			}
			
			if(el.style.top=='50%')el.style.marginTop = '-' + Math.round(el.offsetHeight/2) + 'px';		
			if(el.style.left=='50%')el.style.marginLeft = '-' + Math.round(el.offsetWidth/2) + 'px';	
			
		}			
	}	
	// }}}
	,
	// {{{ __setCursorOfResizeHandles()
    /**
     *	Set css cursor attributes for all the resize handles depending of how they resize the element
     *	
     * @private	
     */	
	__setCursorOfResizeHandles : function()
	{
		for(var no=0;no<this.resizeHandles.length;no++){
			
			switch(this.resizeHandles[no].direction){
				case "west":
				case "east":
					this.resizeHandles[no].element.style.cursor = 'e-resize';	
					break;
				case "north":
				case "south":
					this.resizeHandles[no].element.style.cursor = 's-resize';
					break;
				case "northeast":
					this.resizeHandles[no].element.style.cursor = 'ne-resize';
					break;
				case "northwest":
					this.resizeHandles[no].element.style.cursor = 'nw-resize';
					break;
				case "southwest":
					this.resizeHandles[no].element.style.cursor = 'sw-resize';
					break;
				case "southeast":
					this.resizeHandles[no].element.style.cursor = 'se-resize';
					break;				
			}				
		}		
	}
	// }}}
	,
	// {{{ __addEventsToResizeHandles()
    /**
     * Add events to resize handles.
     *	
     * @private	
     */	
	__addEventsToResizeHandles : function()
	{
		var ind = this.objectIndex;
		for(var no=0;no<this.resizeHandles.length;no++){
			this.resizeHandles[no].element.onmousedown = function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__initResize(e); }
			this.resizeHandles[no].element.onselectstart = function() { return false; };	
			DHTMLSuite.commonObj.__addEventEl(this.resizeHandles[no].element);
			this.resizeHandles[no].element.setAttribute('resizeInDirection',this.resizeHandles[no].direction);		
			this.resizeHandles[no].element.resizeInDirection = this.resizeHandles[no].direction;			
		}		
	}
	// }}}
	,
	// {{{ __addBasicEvents()
    /**
     * Add basic events for the widget
     *	
     * @private	
     */	
	__addBasicEvents : function()
	{
		var ind = this.objectIndex;
		DHTMLSuite.commonObj.addEvent(document.documentElement,'mousemove',function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__processResize(e); },ind);
		DHTMLSuite.commonObj.addEvent(document.documentElement,'mouseup',function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__endResize(e); },ind);	
		if(!document.documentElement.onselectstart)document.documentElement.onselectstart = function() { return DHTMLSuite.commonObj.__isTextSelOk(); };	
		
	}
	// }}}
	,
	// {{{ __initResize()
    /**
     * Resize process starts
     *	
     * @private	
     */	
	__initResize : function(e)
	{
		if(document.all)e = event;
		var src = DHTMLSuite.commonObj.getSrcElement(e);
		if(this.callbackOnBeforeResize){
			var ok = this.__handleCallback('beforeResize');
			if(!ok)return;
		}
		DHTMLSuite.commonObj.__setTextSelOk(false);
		this.resizeTimer = 0;
		this.mouseStartPos.x = e.clientX;
		this.mouseStartPos.y = e.clientY;
		this.initElementSize.width = this.resizeWhichElement.offsetWidth;
		this.initElementSize.height = this.resizeWhichElement.offsetHeight;
		this.initElementSize.top = this.resizeWhichElement.style.top.replace('px','')/1;
		if(this.elementToResizeIsAbsolutePositioned && !this.initElementSize.top)this.initElementSize.top = DHTMLSuite.commonObj.getTopPos(this.resizeWhichElement);
		this.initElementSize.left = this.resizeWhichElement.style.left.replace('px','')/1;
		if(this.elementToResizeIsAbsolutePositioned && !this.initElementSize.left)this.initElementSize.left = DHTMLSuite.commonObj.getLeftPos(this.resizeWhichElement);
		
		this.currentResizeDirection = src.getAttribute('resizeInDirection');
		this.__delayBeforeResize();
		return false;	
	}
	// }}}
	,
	// {{{ __delayBeforeResize()
    /**
     * A small delay from mouse is pressed down to the resize starts.
     *	
     * @private	
     */	
	__delayBeforeResize : function()
	{
		if(this.resizeTimer>=0 && this.resizeTimer<5){
			var ind = this.objectIndex;
			this.resizeTimer++;
			setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__delayBeforeResize()',20);
			return;
		}		
	}
	// }}}
	,
	// {{{ __processResize()
    /**
     * Process resize, i.e. mouse has been pressed down and the mouse pointer is moving.
     *	
     * @private	
     */	
	__processResize : function(e)
	{
		if(document.all)e = event;
		if(this.resizeTimer<5)return;
		if(DHTMLSuite.clientInfoObj.isMSIE && e.button!=1)return this.__endResize();
		
		var newWidth = this.initElementSize.width;
		var newHeight = this.initElementSize.height;
		
		var newTop = this.initElementSize.top;
		var newLeft = this.initElementSize.left;
		
		switch(this.currentResizeDirection){
			case "east":
			case "northeast":
			case "southeast":
				newWidth = (this.initElementSize.width + e.clientX - this.mouseStartPos.x);			
				break;	
		}
		switch(this.currentResizeDirection){
			case "south":
			case "southeast":
			case "southwest":
				newHeight = (this.initElementSize.height + e.clientY - this.mouseStartPos.y)
				break;
			
		}
		
		if(this.currentResizeDirection.indexOf('north')>=0){
			newTop = this.initElementSize.top  + e.clientY - this.mouseStartPos.y;
			newHeight = newHeight - (newTop - this.initElementSize.top);
			if(this.preserveRatio && this.currentResizeDirection=='north')newWidth = Math.round(newHeight * this.sizeOfWidthRelativeToHeight);
			if(newHeight<this.minHeight){
				newTop-=(this.minHeight-newHeight);
			}			
		}
		if(this.currentResizeDirection.indexOf('west')>=0){
			newLeft = this.initElementSize.left  + e.clientX - this.mouseStartPos.x;
			newWidth = newWidth - (newLeft - this.initElementSize.left);
			if(this.preserveRatio && this.currentResizeDirection=='west')newHeight = Math.round(newWidth / this.sizeOfWidthRelativeToHeight);
			if(newWidth<this.minWidth){
				newLeft-=(this.minWidth-newWidth);
			}	
			if(newWidth>this.maxWidth){
				newLeft+=(newWidth-this.maxWidth);
			}		
		}
				
		if(newWidth<this.minWidth)newWidth = this.minWidth;
		if(newHeight<this.minHeight)newHeight = this.minHeight;
		if(this.maxWidth && newWidth>this.maxWidth)newWidth = this.maxWidth;
		if(this.maxHeight && newHeight>this.maxHeight)newHeight = this.maxHeight;

		if(this.currentResizeDirection.indexOf('east')>=0 && this.preserveRatio){
			newHeight = Math.round(newWidth / this.sizeOfWidthRelativeToHeight);
		}	
		if(this.currentResizeDirection.indexOf('south')>=0 && this.preserveRatio){
			newWidth = Math.round(newHeight * this.sizeOfWidthRelativeToHeight);
		}			
		if(this.currentResizeDirection=='northwest' && this.preserveRatio){
			if(newWidth/newHeight > this.sizeOfWidthRelativeToHeight){
				newHeight = Math.round(newWidth / this.sizeOfWidthRelativeToHeight);
			}else{
				newWidth = Math.round(newHeight * this.sizeOfWidthRelativeToHeight);
			}		
		}
		
		this.resizeWhichElement.style.width = newWidth + 'px';
		this.resizeWhichElement.style.height = newHeight + 'px';
		this.resizeWhichElement.style.top = newTop + 'px';
		this.resizeWhichElement.style.left = newLeft + 'px';
		if(this.callbackOnDuringResize)this.__handleCallback('duringResize');
	
	}
	// }}}
	,
	// {{{ __endResize()
    /**
     * Resize process ends.
     *	
     * @private	
     */	
	__endResize : function(e)
	{
		DHTMLSuite.commonObj.__setTextSelOk(true);
		if(this.resizeTimer==5){
			this.__handleCallback('afterResize');
		}
		this.resizeTimer=-1;
	}
	// }}}
	,
	// {{{ __handleCallback()
    /**
     * Execute eventual callback functions.
     *	
     * @private	
     */	
	__handleCallback : function(action)
	{
		var ind = this.objectIndex;
		var callbackString = '';
		switch(action){
			case "afterResize":
				callbackString = this.callbackOnAfterResize;
				break;
			case "duringResize":
				callbackString = this.callbackOnDuringResize;
				break;
			case "beforeResize":
				callbackString = this.callbackOnBeforeResize;
				break;
			
		}
		
		if(callbackString)callbackString = callbackString + '(DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '])';
		
		try{
			return eval(callbackString);
		}catch(e){
			alert('Could not execute call back string after resize');
		}		
	}
}


/*[FILE_START:dhtmlSuite-colorWidgets.js] */
/************************************************************************************************************
*	DHTML window scripts
*
*	Created:						January, 27th, 2006
*	@class Purpose of class:		Color palette
*			
*	Css files used by this script:	
*
*	Demos of this class:			demo-color-window-1.html
*
* 	Update log:
*
************************************************************************************************************/
/**
* @constructor
* @class 	This class simply creates a color palette
* @version 1.0
* @param colorProperties - associative array of palette properties, possible keys: width, callbackOnColorClick
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
*
*	css file used for this widget: color-widget.css
*	Demo: (<a href="../../demos/demo-color-window-1.html" target="_blank">demo 1</a>)
**/

DHTMLSuite.colorPalette = function(propertyArray)
{
	var divElement;
	var layoutCSS;
	var colors;
	var colorHelper;
	var width;
	var callbackOnColorClick;
	var objectIndex;
	var currentColor;
	
	try{
		this.colorHelper = new DHTMLSuite.colorUtil();
	}catch(e){
		alert('You need to include dhtmlSuite-colorUtil.js');
	}
	this.layoutCSS = 'color-palette.css';
	this.colors = new Array();
	this.currentColor = new Object();
	
	if(propertyArray)this.__setInitProps(propertyArray);
	
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();	// This line starts all the init methods
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}	
	this.objectIndex = DHTMLSuite.variableStorage.arrayDSObjects.length;
	DHTMLSuite.variableStorage.arrayDSObjects[this.objectIndex] = this;
}

DHTMLSuite.colorPalette.prototype = 
{
	// {{{ setCallbackOnColorClick()
    /**
     * Specify callback function executed when user clicks on a color. A callback function cal also be specified in the constructor.
     *	
     * @public	
     */		
	setCallbackOnColorClick : function(functionName)
	{
		this.callbackOnColorClick = functionName;
	}
	// }}}
	,	
	// {{{ __setInitProps()
    /**
     * Save initial palette properties sent to the constructor
     *	
     * @private	
     */	
	__setInitProps : function(propertyArray)
	{
		if(propertyArray.width){
			propertyArray.width = propertyArray.width + '';
			if(propertyArray.width.match(/^[^0-9]*?$/)){
				propertyArray.width = propertyArray.width + 'px';
			}
			this.width = propertyArray.width;
		}
		if(propertyArray.callbackOnColorClick)this.callbackOnColorClick = propertyArray.callbackOnColorClick;
	}
	// }}}
	,	
	// {{{ addAllWebColors()
    /**
     * Add all 216 web colors to the palette.
     *	
     * @public	
     */		
	addAllWebColors : function()
	{
		var colors = this.colorHelper.getAllWebColors();
		for(var no=0;no<colors.length;no++){
			this.colors[this.colors.length] = ['#' + colors[no],'#' + colors[no]];
			
		}
		
	}
	// }}}
	,
	// {{{ addAllNamedColors()
    /**
     * Add all named colors to the palette
     *	
     * @public	
     */		
	addAllNamedColors : function()
	{
		var colors = this.colorHelper.getAllNamedColors();	
		for(var no=0;no<colors.length;no++){
			this.colors[this.colors.length] = ['#' + colors[no][1],colors[no][0]];			
		}		
		
	}
	// }}}
	,
	// {{{ addGrayScaleColors()
    /**
     * Add gray scale colors to the palette
     *	
     *	@param Int numberOfColors - Number of colors to add
     *	@param Int rangeFrom - Optional parameter between 0 and 255(default is 0)
     *	@param Int rangeTo - Optional parameter between 0 and 255 ( default is 255)
     * @public	
     */		
	addGrayScaleColors : function(numberOfColors,rangeFrom,rangeTo)
	{
		if(!numberOfColors)numberOfColors = 16;
		if(!rangeFrom)rangeFrom = 0;
		if(!rangeTo)rangeTo = 255;
		if(rangeFrom>rangeTo){
			var tmpRange = rangeFrom;
			rangeFrom = rangeTo;
			rangeTo = tmpRange;	
		}		
		var step = (rangeTo - rangeFrom) / numberOfColors;
		for(var no=rangeFrom;no<=rangeTo;no+=step){
			var color = this.colorHelper.baseConverter(Math.round(no),10,16)+'';
			while(color.length<2)color = '0' + color;
			this.colors[this.colors.length] = ['#' + color + color + color,'#' + color + color + color];			
		}	
	}
	// }}}
	,
	// {{{ addColor()
    /**
     * Add a single color to the palette
     *	
     *	@param String color - Rgb code of color, example. #FF0000
     *	@param String name - Name of color (optional parameter)
     *	
     * @public	
     */	
	addColor : function(color,name)
	{	
		if(!name)name = color;
		this.colors[this.colors.length] = [color,name];		
	}
	// }}}
	,
	// {{{ setLayoutCss()
    /**
     * Specify name of css file.
     *	
     *	@param String cssFileName - Name of css file. path will be the config path + this name.(DHTMLSuite.configObj.cssPath)
     *	
     *	
     * @public	
     */	
	setLayoutCss : function(cssFileName)
	{
		this.layoutCSS = cssFileName;
	}
	// }}}
	,
	// {{{ getDivElement()
    /**
     * Returns a reference to the div element for this widget.
     *	
     *	@return Object DivElement - Reference to div element.
     *	
     *	
     * @public	
     */	
	getDivElement : function()
	{
		return this.divElement;
	}
	// }}}
	,
	// {{{ init()
    /**
     * Initializes the widget. Call this method after all colors has been added to the palette.
     *	
     *	
     * @public	
     */	
	init : function()
	{
		DHTMLSuite.commonObj.loadCSS(this.layoutCSS);
		this.__createMainDivEl();	
		this.__createColorDivs();
	}
	// }}}
	,
	// {{{ __createMainDivEl()
    /**
     * Create main div element for the widget.
     *	
     * @private	
     */	
	__createMainDivEl : function()
	{
		this.divElement = document.createElement('DIV');
		this.divElement.className = 'DHTMLSuite_colorPalette';
		if(this.width){
			this.divElement.style.width = this.width;
		}
	}	
	// }}}
	,
	// {{{ __createColorDivs()
    /**
     * Create small color divs for the widget.
     *	
     * @private	
     */	
	__createColorDivs : function()
	{
		var ind = this.objectIndex;
		for(var no=0;no<this.colors.length;no++){
			var div = document.createElement('DIV');
			div.className = 'DHTMLSuite_colorPaletteColor';
			div.setAttribute('rgb',this.colors[no][0]);
			try{
				div.style.backgroundColor = this.colors[no][0];
			}catch(e){
				div.style.display='none';
			}
			div.onclick = function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__clickOnColor(e); };
			DHTMLSuite.commonObj.__addEventEl(div)
			div.title = this.colors[no][1];
			this.divElement.appendChild(div);	
			
		}	
		var clearDiv = document.createElement('DIV');
		clearDiv.style.clear='both';
		this.divElement.appendChild(clearDiv);
	}
	// }}}
	,
	// {{{ __clickOnColor()
    /**
     * Called when users clicks on a color
     *	@param Event e - Event object - used to get a reference to the clicked color div.
     *	
     * @private	
     */	
	__clickOnColor : function(e)
	{
		if(document.all)e = event;
		var src = DHTMLSuite.commonObj.getSrcElement(e);
		
		this.currentColor.rgb = src.getAttribute('rgb');
		if(!this.currentColor.rgb)this.currentColor.rgb = src.rgb;
		this.currentColor.name = src.title;
		this.__handleCallback('colorClick');
		
	}
	// }}}
	,
	// {{{ __handleCallback()
    /**
     * Handle call back actions.
     *	@param String Action - Callback action to execute
     *	
     * @private	
     */	
	__handleCallback : function(action)
	{
		var callbackString = '';
		switch(action)
		{
			case "colorClick":
				if(this.callbackOnColorClick)callbackString = this.callbackOnColorClick;
				break;
				
		}
		
		if(callbackString){
			callbackString = callbackString + '({ rgb:this.currentColor.rgb, name:this.currentColor.name})';
			eval(callbackString);
		}		
	}
}


/**
* @constructor
* @class This is a color slider class
* @version 1.0
* @param Array properties - Possible keys:
*
*
*	css file used for this widget: color-widget.css
*	Demo: (<a href="../../demos/demo-color-window-1.html" target="_blank">demo 1</a>)
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
**/


DHTMLSuite.colorSlider = function(propertyArray)
{
	var divElement;
	var layoutCSS;
	var colorHelper;	// Object of class DHTMLSuite.colorUtil
	
	var currentRgb;		
	var currentRed;
	var currentGreen;
	var currentBlue;
	var objectIndex;
	var frmFieldRed;
	var frmFieldGreen;
	var frmFieldBlue;
	var callbackOnChangeRgb;
	
	this.currentRgb = 'FF0000';
	this.currentRed = 255;
	this.currentBlue = 0;
	this.currentGreen = 0;
	
	this.currentRedHex = 'FF';
	this.currentGreenHex = '00';
	this.currentBlueHex = '00';
	
	this.layoutCSS = 'color-slider.css';
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();	// This line starts all the init methods
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}	
	
	try{
		this.colorHelper = new DHTMLSuite.colorUtil();
	}catch(e){
		alert('You need to include dhtmlSuite-colorUtil.js');
	}
	
	this.objectIndex = DHTMLSuite.variableStorage.arrayDSObjects.length;
	DHTMLSuite.variableStorage.arrayDSObjects[this.objectIndex] = this;
	
	if(propertyArray)this.__setInitProps(propertyArray);
}


DHTMLSuite.colorSlider.prototype = 
{	
	// {{{ __setInitProps()
    /**
     * Handle call back actions.
     * @param Array props - Array of properties
     *	
     * @private	
     */		
	__setInitProps : function(props)
	{
		if(props.callbackOnChangeRgb)this.callbackOnChangeRgb = props.callbackOnChangeRgb;		
	}
	// }}}
	,
	// {{{ init()
    /**
     * Initializes the script
     *	
     * @public	
     */		
	init : function()
	{
		DHTMLSuite.commonObj.loadCSS(this.layoutCSS);
		this.__createMainDivEl();	
		this.__createDivPreview();
		this.__createSliderDiv();
		this.__createColorDiv();		
		this.__setPreviewDivBgColor();		
	}
	// }}}
	,
	// {{{ setRgbColor()
    /**
     * Set new rgb code
     *
     *	@param String rgbCode - New RGB code in the format RRGGBB
     *	
     * @public	
     */		
	setRgbColor : function(rgbCode)
	{
		rgbCode = rgbCode + '';
		rgbCode = rgbCode.replace(/[^0-9A-F]/gi,'');
		if(rgbCode.length!=6)return false;
		this.currentRgb = rgbCode;
		this.__setParamsFromCurrentRgb();
		try{
			this.__updateSliderHandles();
			this.__updateFormFields();
			this.__setPreviewDivBgColor();		
		}catch(e){
			// Widget not yet initialized by the init() method
		}	
	}
	// }}}
	,
	// {{{ getDivElement()
    /**
     * Return a reference to the main div element for this widget. you can use appendChild() to append it to an element on your web page.
     *	example: document.body.appendChild(colorSlider.getDivElement()).
     *
     *	@return Object divElement - Reference to div element for this widget
     *	
     * @public	
     */		
	getDivElement : function()
	{
		return this.divElement;
	}
	// }}}
	,
	// {{{ __createMainDivEl()
    /**
     * Create main div element for the widget. This is the top most parent div.
     *	
     * @private	
     */	
	__createMainDivEl : function()
	{
		this.divElement = document.createElement('DIV');
		this.divElement.className = 'DHTMLSuite_colorSlider';
	}
	// }}}
	,
	// {{{ __createDivPreview()
    /**
     * Create color preview div.
     *	
     * @private	
     */	
	__createDivPreview : function()
	{
		var div = document.createElement('DIV');
		div.className = 'DHTMLSuite_colorSliderPreviewParent';
		this.divPreview = document.createElement('DIV');
		this.divPreview.className = 'DHTMLSuite_colorSliderPreview';
		div.appendChild(this.divPreview);
		this.divElement.appendChild(div);			
	}
	// }}}
	,
	// {{{ __createSliderDiv()
    /**
     * Create divs for the sliders.
     *	
     * @private	
     */	
	__createSliderDiv : function()
	{
		var ind = this.objectIndex;
		
		var div = document.createElement('DIV');
		div.className = 'DHTMLSuite_colorSliderSliderParent';
		this.divElement.appendChild(div);
		
		// Red slider
		var divRed = document.createElement('DIV');
		divRed.className = 'DHTMLSuite_colorSliderSliderColorRow';
		div.appendChild(divRed);
		
		var labelDiv = document.createElement('DIV');
		labelDiv.className = 'DHTMLSuite_colorSliderSliderLabelDiv';
		labelDiv.innerHTML = 'R';
		divRed.appendChild(labelDiv);
		
		var sliderDiv = document.createElement('DIV');
		sliderDiv.className = 'DHTMLSuite_colorSliderSlider';
		divRed.appendChild(sliderDiv);
		try{
			var sliderObj = new DHTMLSuite.slider();
		}catch(e){
			alert('Error - you need to include dhtmlSuite-slider.js');
		}
		sliderObj.setSliderTarget(sliderDiv);
		sliderObj.setSliderWidth(240);
		sliderObj.setOnChangeEvent('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__receiveRedFromSlider');
		sliderObj.setSliderName('red');
		sliderObj.setInitialValue(this.currentRed);
		sliderObj.setSliderMaxValue(255);
		sliderObj.init();		
		this.sliderObjRed = sliderObj;
		
		var inputDiv = document.createElement('DIV');
		inputDiv.className = 'DHTMLSuite_colorSliderSliderInputDiv';
		this.frmFieldRed = document.createElement('INPUT');
		this.frmFieldRed.value = this.currentRed;
		this.frmFieldRed.maxLength = 3;
		inputDiv.appendChild(this.frmFieldRed);		
		divRed.appendChild(inputDiv);
		this.frmFieldRed.onchange = function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__receiveRedFromForm(e); };
		DHTMLSuite.commonObj.__addEventEl(this.frmFieldRed);		

		
		// Green slider
		var divGreen = document.createElement('DIV');
		divGreen.className = 'DHTMLSuite_colorSliderSliderColorRow';
		div.appendChild(divGreen);
		
		var labelDiv = document.createElement('DIV');
		labelDiv.className = 'DHTMLSuite_colorSliderSliderLabelDiv';
		labelDiv.innerHTML = 'G';
		divGreen.appendChild(labelDiv);
		
		var sliderDiv = document.createElement('DIV');
		sliderDiv.className = 'DHTMLSuite_colorSliderSlider';
		divGreen.appendChild(sliderDiv);

		var sliderObj = new DHTMLSuite.slider();
		sliderObj.setSliderTarget(sliderDiv);
		sliderObj.setSliderWidth(240);
		sliderObj.setOnChangeEvent('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__receiveGreenFromSlider');
		sliderObj.setSliderName('green');
		sliderObj.setInitialValue(this.currentGreen);
		sliderObj.setSliderMaxValue(255);
		sliderObj.init();		
		this.sliderObjGreen = sliderObj;
		
		var inputDiv = document.createElement('DIV');
		inputDiv.className = 'DHTMLSuite_colorSliderSliderInputDiv';
		this.frmFieldGreen = document.createElement('INPUT');
		this.frmFieldGreen.value = this.currentGreen;
		this.frmFieldGreen.maxLength = 3;
		inputDiv.appendChild(this.frmFieldGreen);		
		divGreen.appendChild(inputDiv);
		this.frmFieldGreen.onchange = function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__receiveGreenFromForm(e); };
		DHTMLSuite.commonObj.__addEventEl(this.frmFieldGreen);
				
		// Blue slider
		var divBlue = document.createElement('DIV');
		divBlue.className = 'DHTMLSuite_colorSliderSliderColorRow';
		div.appendChild(divBlue);
		
		var labelDiv = document.createElement('DIV');
		labelDiv.className = 'DHTMLSuite_colorSliderSliderLabelDiv';
		labelDiv.innerHTML = 'B';
		divBlue.appendChild(labelDiv);
		
		var sliderDiv = document.createElement('DIV');
		sliderDiv.className = 'DHTMLSuite_colorSliderSlider';
		divBlue.appendChild(sliderDiv);

		var sliderObj = new DHTMLSuite.slider();
		sliderObj.setSliderTarget(sliderDiv);
		sliderObj.setSliderWidth(240);
		sliderObj.setOnChangeEvent('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__receiveBlueFromSlider');
		sliderObj.setSliderName('blue');
		sliderObj.setInitialValue(this.currentBlue);
		sliderObj.setSliderMaxValue(255);
		sliderObj.init();		
		this.sliderObjBlue = sliderObj;
		
		var inputDiv = document.createElement('DIV');
		inputDiv.className = 'DHTMLSuite_colorSliderSliderInputDiv';
		this.frmFieldBlue = document.createElement('INPUT');
		this.frmFieldBlue.value = this.currentBlue;
		this.frmFieldBlue.maxLength = 3;
		this.frmFieldBlue.onchange = function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__receiveBlueFromForm(e); };
		DHTMLSuite.commonObj.__addEventEl(this.frmFieldBlue);
		inputDiv.appendChild(this.frmFieldBlue);		
		divBlue.appendChild(inputDiv);
		
	}
	// }}}
	,
	// {{{ __getValidatedFormVar()
    /**
     * Return form variable(red,green or blue) from event
     *	
     *	@param Event e - Reference to the Event object.
     * @private	
     */		
	__getValidatedFormVar : function(e)
	{
		var src = DHTMLSuite.commonObj.getSrcElement(e);
		var val = src.value;
		val = val.replace(/[^0-9]/gi,'');
		if(!val)val = 0;
		val = val/1;
		if(val<0)val = 0;
		if(val>255)val = 255;	
		return val;	
	}
	,
	// {{{ __receiveRedFromForm()
    /**
     * Receive color from the red text input.
     *	@param Event e - Reference to the Event object
     *	
     * @private	
     */	
	__receiveRedFromForm : function(e)
	{
		if(document.all)e = event;
		this.currentRed = this.__getValidatedFormVar(e);		
		this.currentRedHex = this.colorHelper.baseConverter(this.currentRed,10,16) + '';
		while(this.currentRedHex.length<2)this.currentRedHex = '0' + this.currentRedHex;
		this.currentRgb = this.currentRedHex + this.currentGreenHex + this.currentBlueHex;
		this.__updateSliderHandles();
		this.__updateFormFields();
		this.__setPreviewDivBgColor();		
	}
	// }}}
	,
	// {{{ __receiveGreenFromForm()
    /**
     * Receive color from the green text input.
     *	
     * @private	
     */	
	__receiveGreenFromForm : function(e)
	{
		if(document.all)e = event;
		this.currentGreen = this.__getValidatedFormVar(e);
		this.currentGreenHex = this.colorHelper.baseConverter(this.currentGreen,10,16) + '';
		while(this.currentGreenHex.length<2)this.currentGreenHex = '0' + this.currentGreenHex;
		this.currentRgb = this.currentRedHex + this.currentGreenHex + this.currentBlueHex;			
		this.__updateSliderHandles();
		this.__updateFormFields();
		this.__setPreviewDivBgColor();			
	}
	// }}}
	,
	// {{{ __receiveBlueFromForm()
    /**
     * Receive blue color from form.
     *	
     * @private	
     */	
	__receiveBlueFromForm : function(e)
	{
		if(document.all)e = event;
		this.currentBlue = this.__getValidatedFormVar(e);
		this.currentBlueHex = this.colorHelper.baseConverter(this.currentBlue,10,16) + '';
		while(this.currentBlueHex.length<2)this.currentBlueHex = '0' + this.currentBlueHex;
		this.currentRgb = this.currentRedHex + this.currentGreenHex + this.currentBlueHex;		
		this.__updateSliderHandles();
		this.__updateFormFields();
		this.__setPreviewDivBgColor();				
	}
	// }}}
	,
	// {{{ __createColorDiv()
    /**
     * Create color div at the bottom, the div users can click on in order to select a color.
     *	
     * @private	
     */	
	__createColorDiv : function()
	{
		var ind = this.objectIndex;		
		var div = document.createElement('DIV');
		div.className = 'DHTMLSuite_colorSliderRgbBgParent';
		this.divElement.appendChild(div);
		this.colorDiv = document.createElement('DIV');
		this.colorDiv.className = 'DHTMLSuite_colorSliderRgbBg';
		div.appendChild(this.colorDiv);		
		DHTMLSuite.commonObj.addEvent(this.colorDiv,'click',function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__clickOnRgbBg(e); });	
	}
	// }}}
	,
	// {{{ __setPreviewDivBgColor()
    /**
     * Update the background color of the preview div..
     *	
     * @private	
     */	
	__setPreviewDivBgColor : function()
	{
		try{
			this.divPreview.style.backgroundColor = '#' + this.currentRgb;
			this.__handleCallback('rgbChange');
		}catch(e){
			alert(this.currentRgb);
		}
	}
	// }}}
	,
	// {{{ __setParamsFromCurrentRgb()
    /**
     * Save properties by parsing rgbCode
     *	
     * @private	
     */		
	__setParamsFromCurrentRgb : function()
	{
		this.currentRedHex = this.currentRgb.substr(0,2); 
		this.currentGreenHex = this.currentRgb.substr(2,2); 
		this.currentBlueHex = this.currentRgb.substr(4,2); 			
		this.currentRed = this.colorHelper.baseConverter(this.currentRedHex,16,10);
		this.currentGreen = this.colorHelper.baseConverter(this.currentGreenHex,16,10);
		this.currentBlue = this.colorHelper.baseConverter(this.currentBlueHex,16,10);			
	}
	// }}}
	,	
	// {{{ __clickOnRgbBg()
    /**
     * Click event on the color gradient at the bottom.
     *	@param Object e - reference to the Event object.
     *	
     * @private	
     */	
	__clickOnRgbBg : function(e)
	{
		var left = DHTMLSuite.commonObj.getLeftPos(this.colorDiv);
		var top = DHTMLSuite.commonObj.getTopPos(this.colorDiv);
		if(document.all) e = event;
		
		var width = 350;
		var height = 20;
		var y = e.clientY - top;
		var x = e.clientX - left - 1;
		if(e.layerX){ // For those browsers who supports layerX, example: Firefox.
			x = e.layerX;	
			y = e.layerY;
		}
		if(y>height)y=height;
		if(x<=350){
			this.currentRgb = this.__getHorizColor(y*width+x-1, width, height);	
			this.__setParamsFromCurrentRgb();
		}else{
			this.currentRgb = '000000';
			this.currentRedHex = '00';
			this.currentGreenHex = '00';
			this.currentBlueHex = '00';
			this.currentRed = 0;
			this.currentGreen = 0;
			this.currentBlue = 0;
		}
		this.__updateSliderHandles();
		this.__updateFormFields();
		this.__setPreviewDivBgColor();
	}
	// }}}
	,
	// {{{ __updateSliderHandles()
    /**
     *  Users has clicked on color bar at the bottom or changed the values of the inputs->Update position of sliders.
     *	
     * @private	
     */	
	__updateSliderHandles : function()
	{
		this.sliderObjRed.setSliderValue(this.currentRed);
		this.sliderObjGreen.setSliderValue(this.currentGreen);
		this.sliderObjBlue.setSliderValue(this.currentBlue);		
	}
	// }}}
	,
	// {{{ __updateFormFields()
    /**
     *  Update values of form fields
     *	
     * @private	
     */	
	__updateFormFields : function()
	{	
		this.frmFieldRed.value = this.currentRed;
		this.frmFieldGreen.value = this.currentGreen;
		this.frmFieldBlue.value = this.currentBlue;		
	}
	// }}}
	,
	// {{{ __receiveRedFromSlider()
    /**
     *  Receive red color from slider
     *	@param Integer value - New red value(0-255)
     *	
     * @private	
     */	
	__receiveRedFromSlider : function(value)
	{
		this.frmFieldRed.value = value;	
		this.currentRed = value;	
		this.currentRedHex = this.colorHelper.baseConverter(value,10,16) + '';
		if(this.currentRedHex.length==1)this.currentRedHex = '0' + this.currentRedHex;	
		this.currentRgb = this.currentRedHex + this.currentGreenHex + this.currentBlueHex;
		this.__setPreviewDivBgColor();
	}
	// }}}
	,
	// {{{ __receiveGreenFromSlider()
    /**
     *  Receive green color from slider
     *	@param Integer value - New green value(0-255)
     *	
     * @private	
     */	
	__receiveGreenFromSlider : function(value)
	{
		this.frmFieldGreen.value = value;	
		this.currentGreen = value;
		this.currentGreenHex = this.colorHelper.baseConverter(value,10,16) + '';	
		if(this.currentGreenHex.length==1)this.currentGreenHex = '0' + this.currentGreenHex;	
		this.currentRgb = this.currentRedHex + this.currentGreenHex + this.currentBlueHex;
		this.__setPreviewDivBgColor();
	}
	// }}}
	,
	// {{{ __receiveBlueFromSlider()
    /**
     *  Receive blue color from slider
     *	@param Integer value - New green value(0-255)
     *	
     * @private	
     */	
	__receiveBlueFromSlider : function(value)
	{
		this.frmFieldBlue.value = value;	
		this.currentBlue = value;
		this.currentBlueHex = this.colorHelper.baseConverter(value,10,16) + '';
		if(this.currentBlueHex.length==1)this.currentBlueHex = '0' + this.currentBlueHex;	
		this.currentRgb = this.currentRedHex + this.currentGreenHex + this.currentBlueHex;		
		this.__setPreviewDivBgColor();	
	}
	// }}}
	,
	// {{{ ____getHorizColor()
    /**
     /* This function is from the great article at http://www.webreference.com/programming/javascript/mk/column3/index.html 
     *
     *  Click events on color bar -> this method returns the correct color based on where the mouse was on the bar
     *
     *	@param Integer i - Combination of x and y position on the bar
     *	@param Integer width - Width of bar
     *	@param Integer height - Height of bar
     *	
     * @private	
     */	
    __getHorizColor : function (i, width, height){
		var sWidth = (width)/7;         // "section" width
		var C=i%width;                  // column
		var R=Math.floor(i/(sWidth*7)); // row
		var c=i%sWidth;                 // column in current group
		var r, g, b, h;
	
		var l=(255/sWidth)*c;           // color percentage
	
		if(C>=sWidth*6){
			r=g=b=255-l;
		} else {
			h=255-l;	
			r=C<sWidth?255:C<sWidth*2?h:C<sWidth*4?0:C<sWidth*5?l:255;
			g=C<sWidth?l:C<sWidth*3?255:C<sWidth*4?h:0;
			b=C<sWidth*2?0:C<sWidth*3?l:C<sWidth*5?255:h;	
			if(R<(height/2)){
				var base = 255-(255*2/height)*R;	
				r=base+(r*R*2/height);
				g=base+(g*R*2/height);
				b=base+(b*R*2/height);
			}else if(R>(height/2)){
				var base = (height-R)/(height/2);	
				r=r*base;
				g=g*base;
				b=b*base;
			}
		}	
		var red = this.colorHelper.baseConverter(r,10,16) + '';
		if(red.length=='1')red = '0' + red;
		var green = this.colorHelper.baseConverter(g,10,16) + '';
		if(green.length=='1')green = '0' + green;
		var blue = this.colorHelper.baseConverter(b,10,16) + '';
		if(blue.length=='1')blue = '0' + blue;
		return red + green + blue;

	}
	// }}}
	,
	// {{{ __handleCallback()
    /**
     *  Handle callback
     *	@param String action - Action to execute
     *	
     * @private	
     */	
	__handleCallback : function(action)
	{
		var callbackString = '';
		switch(action){
			case "rgbChange":
				if(this.callbackOnChangeRgb)callbackString = this.callbackOnChangeRgb;
				break;
		}
		if(callbackString){			
			var rgb = this.currentRgb.toUpperCase();
			callbackString = callbackString + '({ rgb:"#' + rgb + '",name:"#' + rgb + '"})';
			return eval(callbackString);
		}
	}
}


/**
* @constructor
* @class This class provides some methods for working with colors.
* @version 1.0
* @param Array properties - Possible keys:
*		hueSliderPosition("horizontal" or "vertical"(default): 
*		displayHsv (true or false if hsv form fields should be shown - true is default)
*		displayRgb (true or false if rgb form fields should be shown - true is default)
*		displayRgbCode ( true or false if the rgb code field should be shown - true is default)
*		callbackOnChangeRgb ( callback function to execute when rgb code changes)
*		updateFormDuringMoveOnPalette - Update the form with hsv and rgb codes during drag on palette(default = true) - setting this value to false spees up the widget a little bit
*
*
*	css file used for this widget: color-widget.css
*	Demo: (<a href="../../demos/demo-color-window-1.html" target="_blank">demo 1</a>)
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
**/


DHTMLSuite.colorWidget = function(propertyArray)
{
	var divElement;
	var divElPalette;
	var divElPaletteCircle;
	var divElHueBar;
	var sliderDiv;
	var updateFormDuringMoveOnPalette;
	
	var layoutCSS;
	var objectIndex;
	
	var currentHue;
	var currentBrightness;
	var currentSaturation;
	var currentRgbCode;
	
	var colorHelper;
	var dragObject;
	var topPosHueBar;
	var paletteSize;
	
	var formFieldHue;
	var formFieldSaturation;
	var formFieldBrightness;
	var formFieldBlue;
	var formFieldGreen;
	var formFieldRed;
	
	var displayHsv;
	var displayRgb;
	var displayRgbCode;
	
	this.displayRgb = true;
	this.displayHsv = true;
	this.displayRgbCode = true;
	this.updateFormDuringMoveOnPalette = true;
	
	var hueSliderPosition;
	var circleOffsetSize;			// Size of small circle / 2 rounded
	var posdivElPalette;
	var parentRef;
	
	this.posdivElPalette = new Object();
	
	var circleOffsetBecauseOfWinWidget;
	
	var callbackOnChangeRgb;
	
	this.circleOffsetBecauseOfWinWidget = 0;
	
	this.circleOffsetSize = 7;
	this.hueSliderPosition = 'vertical';
	this.layoutCSS = 'color-widget.css';
	this.currentHue = 0;
	this.currentBrightness = 100;
	this.currentSaturation = 100;
	this.paletteSize = 256;
	this.currentRgbCode = 'FF0000';

	try{
		this.colorHelper = new DHTMLSuite.colorUtil();
	}catch(e){
		alert('You need to include dhtmlSuite-colorUtil.js');
	}
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();	// This line starts all the init methods
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}

	
	this.objectIndex = DHTMLSuite.variableStorage.arrayDSObjects.length;
	DHTMLSuite.variableStorage.arrayDSObjects[this.objectIndex] = this;
	
	this.__setInitProps(propertyArray);
}

DHTMLSuite.colorWidget.prototype = 
{
	// {{{ __setInitProps()
    /**
     * Set initial properties sent to the constructor
     *
     * @private
     */		
	__setInitProps : function(propertyArray)
	{
		if(!propertyArray)return;
		if(propertyArray.hueSliderPosition)this.hueSliderPosition = propertyArray.hueSliderPosition;
		if(propertyArray.callbackOnChangeRgb)this.callbackOnChangeRgb = propertyArray.callbackOnChangeRgb;
		if(propertyArray.displayHsv || propertyArray.displayHsv===false)this.displayHsv = propertyArray.displayHsv;
		if(propertyArray.displayRgb || propertyArray.displayRgb===false)this.displayRgb = propertyArray.displayRgb;
		if(propertyArray.displayRgbCode || propertyArray.displayRgbCode===false)this.displayRgbCode = propertyArray.displayRgbCode;
		if(propertyArray.updateFormDuringMoveOnPalette || propertyArray.updateFormDuringMoveOnPalette===false)this.updateFormDuringMoveOnPalette = propertyArray.updateFormDuringMoveOnPalette;
		if(propertyArray.parentRef)this.parentRef = DHTMLSuite.commonObj.getEl(propertyArray.parentRef);
	}
	// }}}
	,
	// {{{ setHueSliderPosition()
    /**
     * Specify position of hue slider, vertical or horizontal
     *
     * @param String hueSliderPosition - Hue slider position - "vertical" or "horizontal"
     * @public
     */		
	setHueSliderPosition : function(hueSliderPosition)
	{
		this.hueSliderPosition = hueSliderPosition;
		if(hueSliderPosition=='vertical'){			
			this.sliderDivHorMain.style.display='none';
			this.sliderDivMain.style.display='block';
			var ind = this.objectIndex;
			setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].sliderDiv.style.marginTop = (2 -Math.floor(DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].sliderDiv.offsetHeight/2)) + "px"',100);
			
				
		}
		if(hueSliderPosition=='horizontal'){
			if(this.sliderDivMain){
				this.sliderDivHorMain.style.display='block';
				this.sliderDivMain.style.display='none';
			}	
		}
	

	}
	// }}}
	,
	// {{{ setCallbackOnChangeRgb()
    /**
     * Specify call back function which is executed when the rgb value is modified. Only the name of the function should be sent to this method. 
     *	When the callback is executed, an associative array will be sent as argument. Keys in this array will be rgb,hue,saturation and brightness.
     *
     * @param String functionName - Name of function to execute when the rgb color is changed.
     * @public
     */		
	setCallbackOnChangeRgb : function(functionName)
	{
		this.callbackOnChangeRgb = functionName;
	}
	// }}}
	,
	// {{{ setRgbColor()
    /**
     * Set new rgb color for the slider.
     *
     * @public
     */	
	setRgbColor : function(rgbColor)
	{
		var hsv = this.colorHelper.getHsvByRgbCode(rgbColor);
		this.currentHue = Math.round(hsv.hue);
		this.currentBrightness = Math.round(hsv.brightness*100);
		this.currentSaturation = Math.round(hsv.saturation*100);
		this.__changeViewAfterColorChange();

	}
	// }}}
	,
	// {{{ setHue()
    /**
     * Set new hue, i.e. position on the color circle.
     *
     *	@param Int hue - value between 0 and 359
     *
     * @public
     */	
	setHue : function(hue)
	{
		hue = hue + '';
		if(hue.match(/^[0-9]+$/)){
			while(hue>=360)hue-=360;
			this.currentHue = hue;
			this.__changeViewAfterColorChange();
		}		
	}
	// }}}
	,
	// {{{ setSaturation()
    /**
     * Set new saturation, i.e. amount of color(hue)
     *
     *	@param Int saturation - value between 0 and 100
     *
     * @public
     */	
	setSaturation : function(saturation)
	{
		saturation = saturation + '';
		if(saturation.match(/^[0-9]+$/)){
			while(saturation>100)saturation-=100;
			this.currentSaturation = saturation;
			this.__changeViewAfterColorChange();
		}		
	}
	// }}}
	,
	// {{{ setBrightness()
    /**
     * Set new brightness
     *
     *	@param Int brightness - value between 0 and 100
     *
     * @public
     */	
	setBrightness : function(brightness)
	{
		brightness = brightness + '';
		if(brightness.match(/^[0-9]+$/)){
			while(brightness>100)brightness-=100;
			this.currentBrightness = brightness;
			this.__changeViewAfterColorChange();
		}		
	}
	// }}}
	,
	// {{{ getDivElement()
    /**
     * Return a reference to main div element for the widget.
     *
     * @public
     */	
	getDivElement : function()
	{
		return this.divElement;
	
	}		
	// }}}
	,
	// {{{ init()
    /**
     * Initializes the widget
     *
     * @public
     */		
	init : function()
	{
		DHTMLSuite.commonObj.loadCSS(this.layoutCSS);
		this.__createMainDivEl();	
		this.__createdivElPalette();
		this.__createHueBar();
		
		this.__createFormDiv();
		this.__createHueBarHorizontal();
		this.__addEvents();
		this.__setPaletteBgColor();
		this.__updateHsvInForm();
		this.__setBgColorPreviewDiv();
		this.__updateRgbInForm();
	}
	// }}}
	,
	// {{{ __changeViewAfterColorChange()
    /**
     * This method is called after a color has been changed by external calls(example: setRgbColor)
     *
     * @private
     */	
	__changeViewAfterColorChange : function()
	{		
		this.__setCurrentRgbCode();
		this.__setPaletteBgColor();		
		this.__setBgColorPreviewDiv();
		this.__setSliderPos();
		this.__updateRgbInForm();
		this.__updateHsvInForm();
		this.__setSmallCirclePosition();		
	}
	// }}}
	,
	// {{{ __updateHsvInForm()
    /**
     * Update Hsv colors in form.
     *
     * @private
     */	
	__updateHsvInForm : function()
	{
		if(!this.displayHsv)return;
		this.fieldHue.value = this.currentHue;
		this.fieldSaturation.value = this.currentSaturation;
		this.fieldBrightness.value = this.currentBrightness;
		return;
		if(this.currentBrightness > 80){			
			this.divElPaletteCircle.className  = 'DHTMLSuite_colorSlider_palette_circle DHTMLSuite_colorSlider_palette_circleBlack';
		}else{
			this.divElPaletteCircle.className  ='DHTMLSuite_colorSlider_palette_circle';
		}
	}
	// }}}
	,
	// {{{ __updateRgbInForm()
    /**
     * Update rgb colors in form.
     *
     * @private
     */	
	__updateRgbInForm : function()
	{
		
		var rgbColors = this.colorHelper.getRgbColorsByRgbCode(this.currentRgbCode);

		if(this.displayRgb){
			this.fieldBlue.value = rgbColors.blue;		
			this.fieldRed.value = rgbColors.red;		
			this.fieldGreen.value = rgbColors.green;	
		}	
		if(this.displayRgbCode){
			this.fieldRgbCode.value = this.currentRgbCode;
		}		
		if(this.callbackOnChangeRgb)this.__handleCallback('rgbChange');
	}
	// }}}
	,
	// {{{ __setSliderPos()
    /**
     * Position vertical and horizontal sliders - called after manually changes in the form
     *
     * @private
     */		
	__setSliderPos : function()
	{
		var topPos = Math.round(this.paletteSize - ((this.currentHue / 360) * this.paletteSize))-3;
		this.sliderDiv.style.top = topPos; 
		this.sliderDivHor.style.left = (this.currentHue - 4) + 'px'; 		
	}
	// }}}
	,
	// {{{ __setBgColorPreviewDiv()
    /**
     * Set background color of preview div
     *
     * @private
     */	
	__setBgColorPreviewDiv : function()
	{
		this.divElPreviewDiv.style.backgroundColor = '#' + this.currentRgbCode;
	}
	// }}}
	,
	// {{{ __setPaletteBgColor()
    /**
     * Set background color of gradient palette
     *
     * @private
     */	
	__setPaletteBgColor : function()
	{
		try{
			this.divElPalette.style.backgroundColor = '#' + this.colorHelper.getRgbCodeByHsv(this.currentHue,1,1);
		}catch(e)
		{
			
		}
	}
	// }}}
	,
	// {{{ __createFormDiv()
    /**
     * Create form elements for the slider
     *
     * @private
     */		
	__createFormDiv : function()
	{
		var ind = this.objectIndex;
		
		this.divElForm = document.createElement('DIV');	
		this.divElForm.className = 'DHTMLSuite_colorSliderFormDiv';
		this.divElement.appendChild(this.divElForm);
		
		this.divElPreviewDiv = document.createElement('DIV');
		this.divElPreviewDiv.className = 'DHTMLSuite_colorSlider_colorPreview';
		this.divElForm.appendChild(this.divElPreviewDiv);
		
		
		var table = document.createElement('TABLE');
		table.cellpadding = 0;
		table.cellspacing = 0;
		table.className = 'DHTMLSuite_colorSliderFormTable';
		var form = document.createElement('FORM');
		table.appendChild(form);
		this.divElForm.appendChild(table);
		
		
		/* Hue */
		if(this.displayHsv){
			var row = table.insertRow(-1);
			var cell = row.insertCell(-1);
			cell.innerHTML = 'H:';
			var cell = row.insertCell(-1);
			this.fieldHue = document.createElement('INPUT');
			this.fieldHue.onchange = function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__receiveHueFromForm(e); }
			DHTMLSuite.commonObj.__addEventEl(this.fieldHue);
			this.fieldHue.maxLength=3;
			cell.appendChild(this.fieldHue);
			
			/* Saturation */
			var row = table.insertRow(-1);
			var cell = row.insertCell(-1);
			cell.innerHTML = 'S:';
			var cell = row.insertCell(-1);
			this.fieldSaturation = document.createElement('INPUT');
			this.fieldSaturation.maxLength=3;
			this.fieldSaturation.onchange = function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__receiveSatFromForm(e); }
			DHTMLSuite.commonObj.__addEventEl(this.fieldSaturation);
			cell.appendChild(this.fieldSaturation);
			
			/* Brightness */
			var row = table.insertRow(-1);
			var cell = row.insertCell(-1);
			cell.innerHTML = 'B:';
			var cell = row.insertCell(-1);
			this.fieldBrightness = document.createElement('INPUT');
			this.fieldBrightness.onchange = function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__receiveBriFromForm(e); }
			DHTMLSuite.commonObj.__addEventEl(this.fieldBrightness);
			this.fieldBrightness.maxLength=3;
			cell.appendChild(this.fieldBrightness);
		}
		
		if(this.displayRgb){		
			var row = table.insertRow(-1);
			var cell = row.insertCell(-1);
			cell.innerHTML = 'R:';
			var cell = row.insertCell(-1);
			this.fieldRed = document.createElement('INPUT');
			this.fieldRed.onchange = function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__setRedColorFromForm(e); }
			DHTMLSuite.commonObj.__addEventEl(this.fieldRed);		
			this.fieldRed.maxLength=3;
			cell.appendChild(this.fieldRed);
			
			var row = table.insertRow(-1);
			var cell = row.insertCell(-1);
			cell.innerHTML = 'G:';
			var cell = row.insertCell(-1);
			this.fieldGreen = document.createElement('INPUT');
			this.fieldGreen.onchange = function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__setGreenColorFromForm(e); }
			DHTMLSuite.commonObj.__addEventEl(this.fieldGreen);				
			this.fieldGreen.maxLength=3;
			cell.appendChild(this.fieldGreen);
			
			var row = table.insertRow(-1);
			var cell = row.insertCell(-1);
			cell.innerHTML = 'B:';
			var cell = row.insertCell(-1);
			this.fieldBlue = document.createElement('INPUT');
			this.fieldBlue.onchange = function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__setBlueColorFromForm(e); }
			DHTMLSuite.commonObj.__addEventEl(this.fieldBlue);			
			this.fieldBlue.maxLength=3;
			cell.appendChild(this.fieldBlue);
		}	
		if(this.displayRgbCode){
			var row = table.insertRow(-1);
			var cell = row.insertCell(-1);
			cell.innerHTML = '#';
			var cell = row.insertCell(-1);
			this.fieldRgbCode = document.createElement('INPUT');
			this.fieldRgbCode.maxLength=6;
			this.fieldRgbCode.className = 'DHTMLSuite_colorSlider_rgbCode';
			this.fieldRgbCode.onchange = function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__receiveRgbCodeFromForm(e); }
			DHTMLSuite.commonObj.__addEventEl(this.fieldRgbCode);	
			cell.appendChild(this.fieldRgbCode);	
		}		
	}
	// }}}
	,	
	// {{{ __createMainDivEl()
    /**
     * Create main div element
     *
     * @private
     */		
	__createMainDivEl : function()
	{
		this.divElement = document.createElement('DIV');
		this.divElement.className = 'DHTMLSuite_colorSlider';	
		if(this.parentRef)this.parentRef.appendChild(this.divElement);
	}
	// }}}
	,
	// {{{ __correctPng()
    /**
     * Correct png gradient for IE6 and below.
     *
     * @private
     */		
	__correctPng : function(id)
	{	
		try{
			var img = document.getElementById(id);
			var html = '<span style="display:inline-block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + img.src + '\',sizingMethod=\'scale\');width:' + this.paletteSize + ';height:' + this.paletteSize + '"></span>';
			img.outerHTML = html;		
		}catch(e){
			var ind = this.objectIndex;
			setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__correctPng("' + id + '")',20);
		}	
	}
	// }}}
	,
	// {{{ __createdivElPalette()
    /**
     * Create div element for the palette
     *
     * @private
     */		
	__createdivElPalette : function() 
	{
		var ind = this.objectIndex;
		var div = document.createElement('DIV');
		div.className = 'DHTMLSuite_colorSlider_palette_border';
		div.style.position = 'relative';
		this.divElement.appendChild(div);
		this.divElPaletteBorder = div;
		
		this.divElPalette = document.createElement('DIV');
		this.divElPalette.className = 'DHTMLSuite_colorSlider_palette';	
		this.divElPalette.style.position='relative';
		
		DHTMLSuite.commonObj.__addEventEl(this.divElPalette);
		
		var img = document.createElement('IMG');
		img.src = DHTMLSuite.configObj.imagePath + 'colorPalettes/bgGradient.png';
		img.setAttribute('width',this.paletteSize);
		img.setAttribute('height',this.paletteSize);
		img.ondragstart = function() { return false; };	
		img.onselectstart = function() { return false; };	
		img.onmousedown = function() { return false; };
		img.id = '' + DHTMLSuite.commonObj.getUniqueId();
		this.divElPalette.appendChild(img);
		DHTMLSuite.commonObj.__addEventEl(img);
		
		if((DHTMLSuite.clientInfoObj.isMSIE && DHTMLSuite.clientInfoObj.navigatorVersion<7) || DHTMLSuite.clientInfoObj.isOpera){
			this.__correctPng(img.id);		
		}		
		div.appendChild(this.divElPalette);			
		this.divElPaletteCircle = document.createElement('DIV');
		this.divElPaletteCircle.className = 'DHTMLSuite_colorSlider_palette_circle';	
		this.divElPalette.appendChild(this.divElPaletteCircle);		
		this.divElPaletteCircle.display='block';		
		this.divElPaletteCircle.style.top = '-' + this.circleOffsetSize + 'px';
		this.divElPaletteCircle.style.left = (this.paletteSize - this.circleOffsetSize) + 'px';

	}
	// }}}
	,
	// {{{ __setSmallCirclePosition()
    /**
     * Position the small circle.
     *
     * @private
     */			
	__setSmallCirclePosition : function()
	{
		var leftPos = Math.round(this.currentSaturation * (this.paletteSize / 100)) - this.circleOffsetSize;
		var topPos = this.paletteSize - Math.round(this.currentBrightness * (this.paletteSize / 100)) - this.circleOffsetSize;		
		this.divElPaletteCircle.style.left = leftPos + 'px';
		this.divElPaletteCircle.style.top = topPos  + 'px';		
		this.divElPaletteCircle.className = this.divElPaletteCircle.className.replace(' DHTMLSuite_colorSlider_palette_circleBlack','');
		if(this.currentBrightness > 80){			
			this.divElPaletteCircle.className  = this.divElPaletteCircle.className + ' DHTMLSuite_colorSlider_palette_circleBlack';
		}	
		
	}
	// }}}
	,
	// {{{ __createHueBar()
    /**
     * Create vertical hue bar
     *
     * @private
     */	
	__createHueBar : function()
	{
		var ind = this.objectIndex;		
		var mainDiv = document.createElement('DIV');
		mainDiv.className = 'DHTMLSuite_colorSlider_hue';
		this.sliderDivMain = mainDiv;
		this.divElement.appendChild(mainDiv);
		this.sliderDiv = document.createElement('DIV');
		this.sliderDiv.className = 'DHTMLSuite_colorSlider_sliderHandle';
		mainDiv.appendChild(this.sliderDiv);
		this.sliderDiv.innerHTML = '<div><span></span></div>';
		setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].sliderDiv.style.marginTop = (2 -Math.floor(DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].sliderDiv.offsetHeight/2)) + "px"',100);
		var div = document.createElement('DIV');
		div.className = 'DHTMLSuite_colorSlider_hueBar_border';
		mainDiv.appendChild(div);
		this.divElHueBar = document.createElement('DIV');
		this.divElHueBar.className = 'DHTMLSuite_colorSlider_hueBar';
		div.appendChild(this.divElHueBar);
		if(this.hueSliderPosition=='horizontal')mainDiv.style.display='none';
	}	
	// }}}
	,
	// {{{ __createHueBarHorizontal()
    /**
     * Create horizontal hue bar
     *
     * @private
     */	
	__createHueBarHorizontal : function()
	{		
		var ind = this.objectIndex;
		this.sliderDivHorMain = document.createElement('DIV');
		this.sliderDivHorMain.className = 'DHTMLSuite_colorSlider_hueHorizontal';
		this.divElement.appendChild(this.sliderDivHorMain);
		this.sliderDivHor = document.createElement('DIV');
		this.sliderDivHor.className = 'DHTMLSuite_colorSlider_sliderHandleHorizontal';
		this.sliderDivHorMain.appendChild(this.sliderDivHor);
		this.sliderDivHor.innerHTML = '<div><span></span></div>';
		setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].sliderDiv.style.marginTop = (2 -Math.floor(DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].sliderDiv.offsetHeight/2)) + "px"',100);
		var div = document.createElement('DIV');
		div.className = 'DHTMLSuite_colorSlider_hueBarHorizontal_border';
		this.sliderDivHorMain.appendChild(div);
		this.divElHueBarHorizontal = document.createElement('DIV');
		this.divElHueBarHorizontal.className = 'DHTMLSuite_colorSlider_hueBarHorizontal';
		div.appendChild(this.divElHueBarHorizontal);
		if(this.hueSliderPosition=='vertical')this.sliderDivHorMain.style.display='none';		
	}	

	// }}}
	,
	// {{{ __setHueFromHorizontalSlider()
    /**
     * User has dragged the hrozintal scrollbar - we need to update the view.
     *
     * @private
     */	
	__setHueFromHorizontalSlider : function(e)
	{
		if(document.all)e = event;
		var hue = this.sliderDivHor.offsetLeft + 4;
		if(hue>359 || hue<0)hue=0;
		this.currentHue = hue;
		this.__setPaletteBgColor();
		this.__setBgColorPreviewDiv();	
		this.__updateRgbInForm();	
		this.__updateHsvInForm();	
	}
	// }}}
	,
	// {{{ __setHueFromSlider()
    /**
     * User has dragged the vertical scrollbar - we need to update the view.
     *
     * @private
     */	
	__setHueFromSlider : function(e)
	{
		if(document.all)e = event;
		var hue = 360 - Math.round((this.sliderDiv.offsetTop + 4) * (360/this.paletteSize))
		if(hue>359 || hue<0)hue=0;
		this.currentHue = hue;
		this.__setPaletteBgColor();	
		this.__setBgColorPreviewDiv();	
		this.__updateHsvInForm();
		this.__updateRgbInForm();
		
	}
	// }}}
	,
	// {{{ __addEvents()
    /**
     * Add basic events.
     *
     * @private
     */	
	__addEvents : function()
	{
		var ind = this.objectIndex;
		DHTMLSuite.commonObj.addEvent(this.sliderDivHorMain,'mousedown',function(e){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__initHorHueMove(e); });		
		DHTMLSuite.commonObj.addEvent(this.sliderDivMain,'mousedown',function(e){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__initHueMove(e); });		
		DHTMLSuite.commonObj.addEvent(this.divElPalette,'mousedown',function(e){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__initPaletteMove(e); });		
		DHTMLSuite.commonObj.addEvent(document.documentElement,'mousemove',function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__moveOnPalette(e); });		
		DHTMLSuite.commonObj.addEvent(document.documentElement,'mousemove',function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__moveOnHorizHueBar(e); });		
		DHTMLSuite.commonObj.addEvent(document.documentElement,'mousemove',function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__moveOnHueBar(e); });		
		DHTMLSuite.commonObj.addEvent(document.documentElement,'mouseup',function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__endDrag(e); });			
		DHTMLSuite.commonObj.addEvent(this.divElHueBar,'mousedown',function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__moveOnHueBar(e); });		
	
		if(!document.documentElement.onselectstart){
			document.documentElement.onselectstart = function() { return DHTMLSuite.commonObj.__isTextSelOk(); };
			DHTMLSuite.commonObj.__addEventEl(document.documentElement);		
		}
	}
	// }}}
	,
	// {{{ __moveOnHueBar()
    /**
     * Click on hue bar - move the slider and update the view.
     *
     * @private
     */	
	__moveOnHueBar : function(e)
	{
		if(this.hueStatus!=1)return;
		if(document.all)e = event;
		var topPos = this.poxYHue;		
		var diff = e.clientY + document.documentElement.scrollTop - topPos;
		if(diff>this.paletteSize)diff = this.paletteSize;
		if(diff<0)diff=0;
		this.sliderDiv.style.top = diff + 'px';
		var hue = Math.round(((this.paletteSize-diff) * (360/this.paletteSize))); 
		if(hue==360)hue=0;
		this.currentHue = hue;
		this.__setCurrentRgbCode();
		this.__setPaletteBgColor();	
		this.__setBgColorPreviewDiv();	
		this.__updateHsvInForm();	
		this.__updateRgbInForm();	
	}
	// }}}
	,
	// {{{ __moveOnHorizHueBar()
    /**
     * Click on hue bar - move the slider and update the view.
     *
     * @private
     */	
	__moveOnHorizHueBar : function(e)
	{
		if(this.hueHorStatus!=1)return;
		if(document.all)e = event;
		var leftPos = this.posXHorHue;		
		var diff = e.clientX - leftPos - this.circleOffsetBecauseOfWinWidget;		
		if(diff<0)diff=0;
		if(diff>362)diff=362;
		this.sliderDivHor.style.left = (diff -4) + 'px';
		var hue = diff; 
		if(hue>=360)hue=0;
		this.currentHue = hue;
		this.__setCurrentRgbCode();
		this.__setPaletteBgColor();	
		this.__setBgColorPreviewDiv();
		this.__updateHsvInForm();	
		this.__updateRgbInForm();	
	}
	// }}}
	,
	// {{{ __setHueFromRgbColorsInForm()
    /**
     * User have changed value in the rgb code text input
     *
     * @private
     */	
	__setHueFromRgbColorsInForm : function()
	{
		var color = this.colorHelper.getRgbCodeByRgbColors(this.fieldRed.value,this.fieldGreen.value,this.fieldBlue.value);		
		var hsv = this.colorHelper.getHsvByRgbCode(color);
		this.currentHue = Math.round(hsv.hue);
		this.currentSaturation = Math.round(hsv.saturation*100);
		this.currentBrightness = Math.round(hsv.brightness*100);
		this.__changeViewAfterColorChange();
	}
	// }}}
	,
	// {{{ __setRedColorFromForm()
    /**
     * Receive red value from form
     *
     * @private
     */	
	__setRedColorFromForm : function(e)
	{
		if(document.all)e = event;
		var src = DHTMLSuite.commonObj.getSrcElement(e);
		var red = src.value;	
		if(red.match(/^[0-9]+$/)){
			if(red/1>255)red=255;
		}else{
			red = 0;
		}
		src.value = red;
		this.__setHueFromRgbColorsInForm();
		this.__changeViewAfterColorChange();						
	}
	// }}}
	,
	// {{{ __setGreenColorFromForm()
    /**
     * Receive green value from form
     *
     * @private
     */	
	__setGreenColorFromForm : function(e)
	{
		if(document.all)e = event;
		var src = DHTMLSuite.commonObj.getSrcElement(e);
		var green = src.value;		
		var green = src.value;	
		if(green.match(/^[0-9]+$/)){
			if(green/1>255)green=255;
		}else{
			green = 0;
		}
		src.value = green;
		this.__setHueFromRgbColorsInForm();		
		this.__changeViewAfterColorChange();	
	}
	// }}}
	,
	// {{{ __setBlueColorFromForm()
    /**
     * Receive blue value from form
     *
     * @private
     */
	__setBlueColorFromForm : function(e)
	{
		if(document.all)e = event;
		var src = DHTMLSuite.commonObj.getSrcElement(e);
		var blue = src.value;
		var blue = src.value;	
		if(blue.match(/^[0-9]+$/)){
			if(blue/1>255)blue=255;
		}else{
			blue = 0;
		}
		src.value = blue;
		this.__setHueFromRgbColorsInForm();			
	}
	// }}}
	,
	// {{{ __receiveRgbCodeFromForm()
    /**
     * Receive rgb code from form
     *
     * @private
     */
	__receiveRgbCodeFromForm : function(e)
	{
		if(document.all)e = event;
		var src = DHTMLSuite.commonObj.getSrcElement(e);
		var rgbCode = src.value;
		if(!rgbCode.match(/^[0-9A-F][0-9A-F][0-9A-F][0-9A-F][0-9A-F][0-9A-F]$/i)){
			rgbCode = 'FF0000';
		}
		var hsv = this.colorHelper.getHsvByRgbCode(rgbCode);
		this.currentHue = Math.round(hsv.hue);
		this.currentSaturation = Math.round(hsv.saturation*100);
		this.currentBrightness = Math.round(hsv.brightness*100);
		this.__changeViewAfterColorChange();
	}
	// }}}
	,
	// {{{ __receiveHueFromForm()
    /**
     * Receive hue from form
     *
     * @private
     */
	__receiveHueFromForm : function(e)
	{
		if(document.all)e = event;
		var src = DHTMLSuite.commonObj.getSrcElement(e);
		var hue = src.value;
		hue = hue + '';
		if(hue.match(/^[0-9]+$/)){
			if(hue/1>360)hue=360;
		}else{
			hue = 0;
		}		
		if(hue==360)hue=0;
		this.currentHue = hue;
		src.value = hue;
		this.__changeViewAfterColorChange();	
	}
	// }}}
	,
	// {{{ __receiveBriFromForm()
    /**
     * Receive brightness from form
     *
     * @private
     */
	__receiveBriFromForm : function(e)
	{
		if(document.all)e = event;
		var src = DHTMLSuite.commonObj.getSrcElement(e);
		var brightness = src.value;
		brightness = brightness + '';
		if(brightness.match(/^[0-9]+$/)){
			if(brightness/1>100)brightness=100;
		}else{
			brightness = 0;
		}
		this.currentBrightness = brightness;
		src.value = brightness;
		this.__changeViewAfterColorChange();	
	}
	// }}}
	,
	// {{{ __receiveSatFromForm()
    /**
     * Receive saturation from form
     *
     * @private
     */
	__receiveSatFromForm : function(e)
	{
		if(document.all)e = event;
		var src = DHTMLSuite.commonObj.getSrcElement(e);
		var saturation = src.value;
		saturation = saturation + '';
		if(saturation.match(/^[0-9]+$/)){
			if(saturation/1>100)saturation=100;
		}else{
			saturation = 0;
		}
		this.currentSaturation = saturation;
		src.value = saturation;
		this.__changeViewAfterColorChange();
		
	}
	// }}}
	,
	// {{{ __ffHackWinWidget()
    /**
     * Firefox hack - should be replaced when we find a good way to extract the correct x and y position of an element. The current DHTMLSuite.getLeftPos function doesn't work well there.
     *
     * @private
     */	
	__ffHackWinWidget : function()
	{
		if(this.divElement.parentNode.className && this.divElement.parentNode.className.indexOf('windowContent')>=0 && !document.all){
			this.circleOffsetBecauseOfWinWidget = 0; // Firefox hack because of problems with the getLeftPos() method. Need to figure out a better way to do this. the getLeftPos method returns wrong position in Firefox for window widget content
		}			
	}
	// }}}
	,
	__initHorHueMove : function(e)
	{
		this.hueHorStatus = 1;
		this.__ffHackWinWidget();
		this.posXHorHue = DHTMLSuite.commonObj.getLeftPos(this.divElHueBarHorizontal);		
		DHTMLSuite.commonObj.__setTextSelOk(false);
		this.__moveOnHorizHueBar(e);	
		return false;
	}	
	// }}}
	,
	__initHueMove : function(e)
	{
		this.hueStatus = 1;
		this.poxYHue = DHTMLSuite.commonObj.getTopPos(this.divElHueBar);
		DHTMLSuite.commonObj.__setTextSelOk(false);
		this.__moveOnHueBar(e);	
		return false;
	}	
	// }}}
	,
	// {{{ __initPaletteMove()
    /**
     * Initiate move on palette.
     *
     * @private
     */	
	__initPaletteMove : function(e)
	{
		if(document.all)e = event;
		this.__ffHackWinWidget();
		// Cache x and y position position of palette	
		this.posdivElPalette.x = DHTMLSuite.commonObj.getLeftPos(this.divElPalette) + this.circleOffsetBecauseOfWinWidget;
		this.posdivElPalette.y = DHTMLSuite.commonObj.getTopPos(this.divElPalette) + this.circleOffsetBecauseOfWinWidget;	
		this.dragStatus = 1;		
		
		this.paletteMaxX = (this.divElPalette.clientWidth -this.circleOffsetSize); 
		this.paletteMaxY = (this.divElPalette.clientHeight -this.circleOffsetSize); 
		this.__moveOnPalette(e);		
		DHTMLSuite.commonObj.__setTextSelOk(false);
		return false;	
	}
	// }}}
	,
	// {{{ __setCurrentRgbCode()
    /**
     * Save current rgb code
     *
     * @private
     */	
	__setCurrentRgbCode : function()
	{
		this.currentRgbCode = this.colorHelper.getRgbCodeByHsv(this.currentHue,this.currentSaturation/100,this.currentBrightness/100);

	}
	// }}}
	,
	// {{{ __endDrag()
    /**
     * End moving circle on palette
     *
     * @private
     */	
	__endDrag : function()
	{
		if(this.dragStatus==1){
			this.__updateHsvInForm();
			this.__updateRgbInForm();
		}			
		this.dragStatus = 0;
		this.hueHorStatus = 0;
		this.hueStatus = 0;
		
		

					
		DHTMLSuite.commonObj.__setTextSelOk(true);
	}
	// }}}
	,
	// {{{ __moveOnPalette()
    /**
     * Click on palette
     *
     * @private
     */	
	__moveOnPalette : function(e)
	{
		if(this.dragStatus!=1)return;
		if(this.clickOnPaletteInProgress)return;
		this.clickOnPaletteInProgress= true;	
		if(document.all)e = event;	
		var leftEl = this.posdivElPalette.x;
		var topEl = this.posdivElPalette.y;			
		
		var left = e.clientX +  document.documentElement.scrollLeft - leftEl -this.circleOffsetSize;
		var top = e.clientY + document.documentElement.scrollTop - topEl -this.circleOffsetSize;
		
		if(left<this.circleOffsetSize*-1)left = this.circleOffsetSize*-1;
		if(top<this.circleOffsetSize*-1)top = this.circleOffsetSize*-1;
		
		if(left>this.paletteMaxX)left = this.paletteMaxX;
		if(top>this.paletteMaxY)top = this.paletteMaxY;			
		
		this.divElPaletteCircle.style.left = left + 'px';
		this.divElPaletteCircle.style.top = top + 'px';
		
		this.currentSaturation = Math.round(((left+this.circleOffsetSize) / this.paletteSize) * 100);
		this.currentBrightness = 100 - Math.round(((top+this.circleOffsetSize) / this.paletteSize) * 100);
		
		this.__setCurrentRgbCode();
		this.__setBgColorPreviewDiv();
		
		if(this.updateFormDuringMoveOnPalette){
			this.__updateHsvInForm();
			this.__updateRgbInForm();		
		}
		this.clickOnPaletteInProgress = false;	
	}
	// }}}
	,
	// {{{ __handleCallback()
    /**
     * Handle/Evaluate call back
     *
     * @private
     */	
	__handleCallback : function(action)
	{
		var callbackString = '';
		switch(action){
			case 'rgbChange':
				if(this.callbackOnChangeRgb)callbackString = this.callbackOnChangeRgb;
				break;	
			
		}	
		if(callbackString){
			callbackString = callbackString + '({ rgb:"#" + this.currentRgbCode,hue:this.currentHue,brightness:this.currentBrightness,saturation:this.currentSaturation })';
			eval(callbackString);		
		}
	}	
}
/*[FILE_START:dhtmlSuite-colorUtil.js] */
/************************************************************************************************************
*	Color functions
*
*	Created:			August, 23rd, 2006
*	@class Purpose of class:	This class provides some methods for working with colors.
*			
* 	Update log:
*
************************************************************************************************************/
/**
* @constructor
* @class This class provides some methods for working with colors.
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
**/
DHTMLSuite.colorUtil = function()
{	
}

DHTMLSuite.colorUtil.prototype = {

	// {{{ baseConverter()
    /**
     *	converts numbers from different number systems(example: Decimal to octal)
     * 	
     *	@param mixed numberToConvert - Number to convert
     *	@param int oldBase - Convert from which base(8 = octal, 10 = decimal, 16 = hexadecimal)
     *	@param int newBase - Convert to which base(8 = octal, 10 = decimal, 16 = hexadecimal)
     *	
     *	@return String number in new base.(Example: decimal "16" returns "F" when converted to hexadecimal)
     *	@type String
     *
     * @public
     */	
    	
	baseConverter : function(numberToConvert,oldBase,newBase) {
		if(newBase==10){
			return parseInt(numberToConvert,16);
		}
		if(newBase==16){
			return parseInt(numberToConvert).toString(16);
		}		
		numberToConvert = numberToConvert + "";
		numberToConvert = numberToConvert.toUpperCase();
		var listOfCharacters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
		var dec = 0;
		for (var i = 0; i <=  numberToConvert.length; i++) {
			dec += (listOfCharacters.indexOf(numberToConvert.charAt(i))) * (Math.pow(oldBase , (numberToConvert.length - i - 1)));
		}
		numberToConvert = "";
		var magnitude = Math.floor((Math.log(dec))/(Math.log(newBase)));
		for (var i = magnitude; i >= 0; i--) {
			var amount = Math.floor(dec/Math.pow(newBase,i));
			numberToConvert = numberToConvert + listOfCharacters.charAt(amount); 
			dec -= amount*(Math.pow(newBase,i));
		}
		if(numberToConvert.length==0)numberToConvertToConvert=0;
		if(!numberToConvert)numberToConvert=0;
		return numberToConvert;
	}
	// }}}
	,
	// {{{ getHsvByRgbCode()
    /**
     *	Converts a RGB color to HSV
     * 	
     *	@param String rgbColor - Example: #FF12AB or FF12AB
     *	@return Array H,S,B = Hue, Saturation and Brightness
     *	@type Array
     *
     * @public
     */		
	getHsvByRgbCode : function(rgbColor){
		rgbColor = rgbColor.replace('#','');		
		red = this.baseConverter(rgbColor.substr(0,2),16,10);
		green = this.baseConverter(rgbColor.substr(2,2),16,10);
		blue = this.baseConverter(rgbColor.substr(4,2),16,10);

		if(red==0 && green==0 && blue==0){
			var returnArray = new Object();
			returnArray.hue = 0;
			returnArray.saturation=0;
			returnArray.brightness = 0;
			return returnArray;		
		}
			
		red = red/255;
		green = green/255;
		blue = blue/255;
		
		maxValue = Math.max(red,green,blue);
		minValue = Math.min(red,green,blue);
		
		var hue = 0;
		
		if(maxValue==minValue){
			hue = 0;
			saturation=0;
		}else{
			if(red == maxValue){
				hue = (green - blue) / (maxValue-minValue)/1;	
			}else if(green == maxValue){
				hue = 2 + (blue - red)/1 / (maxValue-minValue)/1;	
			}else if(blue == maxValue){
				hue = 4 + (red - green) / (maxValue-minValue)/1;	
			}
			saturation = (maxValue-minValue) / maxValue;
		}
		hue = hue * 60; 
		valueBrightness = maxValue;
	
		if(hue<0)hue+=360;	
		var returnArray = new Object();
		returnArray.hue = hue;
		returnArray.saturation = saturation;
		returnArray.brightness = valueBrightness;
		return returnArray;
	}
	// }}}
	,
	// {{{ getCompColorByRgb()
    /**
     *	Return the rgb code of a complementary color
     * 	
     *	@param String inputRgb - Rgb code
     *
     *	@return String rgbCode - Complementary color
     *	@type String
     *
     * @public
     */		
	getContrastColorByRgb : function(rgbCode)
	{
		var hsv = this.getHsvByRgbCode(rgbCode);	
		hsv.hue+=180;
		if(hsv.hue>=360)hsv.hue-=360;
		return this.getRgbCodeByHsv(hsv.hue,hsv.saturation,hsv.brightness);		
	}
	// }}}
	,
	// {{{ getTriadeColorsByRgb()
    /**
     *	Return triade colors of an rgb code. Triade colors are 3 colors located 120 degrees from each other on the color wheel. This method will return the 2 triade colors for the input color
     * 	
     *	@param String inputRgb - Rgb code
     *
     *	@return Array colors - Array of triade colors
     *	@type String
     *
     * @public
     */		
	getTriadeColorsByRgb : function(rgbCode)
	{
		var hsv = this.getHsvByRgbCode(rgbCode);	
		var colors = new Array();
		for(var no=120;no<360;no+=120){
			colors[colors.length] = this.getRgbCodeByHsv(hsv.hue + no,hsv.saturation,hsv.brightness)		
		}
		return colors;		
	}
	// }}}
	,
	// {{{ getTetradeColorsByRgb()
    /**
     *	Return tetrade colors of an rgb code. Triade colors are 4 colors located 90 degrees from each other on the color wheel. This method will return the 3 tetrade colors for the input color
     * 	
     *	@param String inputRgb - Rgb code
     *
     *	@return Array colors - Array of triade colors
     *	@type String
     *
     * @public
     */		
	getTetradeColorsByRgb : function(rgbCode)
	{
		var hsv = this.getHsvByRgbCode(rgbCode);	
		var colors = new Array();
		for(var no=90;no<360;no+=90){
			colors[colors.length] = this.getRgbCodeByHsv(hsv.hue + no,hsv.saturation,hsv.brightness)		
		}
		return colors;		
	}
	// }}}
	,
	// {{{ getAnalogicColors()
    /**
     *	Return getAnalogicColors colors of an rgb code. Analogic colors will return 4 colors, two evenly distanced on both sides of the input color. You can specify distance by sending in a second argument to this
     *	method. Default is 25.
     * 	
     *	@param String inputRgb - Rgb code
     *	@param Integer degrees - Degrees on the color wheel between colors(value between 15 and 30)
     *
     *	@return Array colors - Array of triade colors
     *	@type String
     *
     * @public
     */		
	getAnalogicColors : function(rgbCode,degrees)
	{
		degrees = degrees + '';
		if(!degrees)degrees = 25;
		if(!degrees.match(/^[0-9]{2}$/)){
			degrees = 25;
		}
		if(degrees<15)degrees=15;
		if(degrees>30)degrees=30;
		degrees/=1;
		var hsv = this.getHsvByRgbCode(rgbCode);	
		var colors = new Array();
		for(var no=1;no<=2;no++){
			colors[colors.length] = this.getRgbCodeByHsv(hsv.hue + (no*degrees),hsv.saturation,hsv.brightness)		
		}
		for(var no=-1;no>=-2;no--){
			colors[colors.length] = this.getRgbCodeByHsv(hsv.hue + (no*degrees),hsv.saturation,hsv.brightness)		
		}
		return colors;		
	}
	// }}}
	,
	// {{{ getRgbCodeByRgbColors()
    /**
     *	Return an rgb code from numeric red,green and blue
     * 	
     *	@param Int red - (0 - 255)
     *	@param int green - ( 0 - 255)
     *	@param int blue - (0-255)
     *
     *	@return Array RGB - Returns an associative array of the keys red,green,blue, example myColor['red'] or myColor.red)
     *	@type String
     *
     * @public
     */		
	getRgbCodeByRgbColors : function(red,green,blue)
	{
		red = this.baseConverter(red,10,16);
		green = this.baseConverter(green,10,16);
		blue = this.baseConverter(blue,10,16);
		
		red = red + "";
		green = green + "";
		blue = blue + "";
	
		while(red.length<2){
			red = "0" + red;
		}	
		while(green.length<2){
			green = "0" + green;
		}	
		while(blue.length<2){
			blue = "0" + "" + blue;
		}
		rgbColor = red + "" + green + "" + blue;
		return rgbColor.toUpperCase();		
	}
	// }}}
	,
	// {{{ getRgbColorsByRgbCode()
    /**
     *	Return an rgb code from numeric red,green and blue
     * 	
     *	@param String rgbCode in the format RRGGBB ( NO # as prefix)
     *
     *	@return Array RGB - Returns an associative array of the keys red,green,blue, example myColor['red'] or myColor.red)
     *	@type Array
     *
     * @public
     */		
	getRgbColorsByRgbCode : function(rgbCode)
	{
		var retArray = new Object();
		retArray.red = this.baseConverter(rgbCode.substr(0,2),16,10);
		retArray.green = this.baseConverter(rgbCode.substr(2,2),16,10);
		retArray.blue = this.baseConverter(rgbCode.substr(4,2),16,10);
		return retArray;	
	}
	// }}}	
	,
	// {{{ getRgbColorsByHsv()
    /**
     *	Return an array of red,green and blue from hue,saturation and brightness
     * 	
     *	@param Int hue - Degrees - Position on color wheel. Value between 0 and 359
     *	@param float saturation - Intensity of color(value between 0 and 1)
     *	@param float valueBrightness - Brightness(value between 0 and 1)
     *
     *	@return Array RGB - Returns an associative array of the keys red,green,blue, example myColor['red'] or myColor.red)
     *	@type String
     *
     * @public
     */		
	getRgbColorsByHsv : function(hue,saturation,valueBrightness)
	{
		Hi = Math.floor(hue / 60);
		if(hue==360)hue=0;
		f = hue/60 - Hi;
		if(saturation>1)saturation/=100;
		if(valueBrightness>1)valueBrightness/=100;
		
		p = (valueBrightness * (1- saturation));
		q = (valueBrightness * (1 - (f * saturation)));
		t = (valueBrightness * (1 - ((1-f)*saturation)));

		switch(Hi){
			case 0:
				red = valueBrightness;
				green = t;
				blue = p;				
				break;
			case 1: 
				red = q;
				green = valueBrightness;
				blue = p;
				break;
			case 2: 
				red = p;
				green = valueBrightness;
				blue = t;
				break;
			case 3: 
				red = p;
				green = q;;
				blue = valueBrightness;
				break;
			case 4:
				red = t;
				green = p;
				blue = valueBrightness;
				break;
			default:
				red = valueBrightness;
				green = p;
				blue = q;
				break;
		}
		
		if(saturation==0){
			red = valueBrightness;
			green = valueBrightness;
			blue = valueBrightness;		
		}
		
		red*=255;
		green*=255;
		blue*=255;
	
		red = Math.round(red);
		green = Math.round(green);
		blue = Math.round(blue);	
			
		var retArray = new Object();
		retArray.red = red;
		retArray.green = green;
		retArray.blue = blue;
		return retArray;	
	}
	// }}}
	,
	// {{{ getRgbCodeByHsv()
    /**
     *	Converts a RGB color to HSV
     * 	
     *	@param Int hue - Degrees - Position on color wheel. Value between 0 and 359
     *	@param float saturation - Intensity of color(value between 0 and 1)
     *	@param float valueBrightness - Brightness(value between 0 and 1)
     *
     *	@return String RGBColor - example #FF00FF
     *	@type String
     *
     * @public
     */		
	getRgbCodeByHsv : function(hue,saturation,valueBrightness){
		while(hue>=360)hue-=360;
		var colors = this.getRgbColorsByHsv(hue,saturation,valueBrightness);		
		var red = colors.red;
		var green = colors.green
		var blue = colors.blue;
		
		return this.getRgbCodeByRgbColors(red,green,blue);
	}
	// }}}	
	,
	// {{{ getColorByDegrees()
    /**
     *	Returns RGB color from a position on the color wheel
     * 	
     *	@param String rgbColor - Rgb color to calculate degrees from
     *	@param Float degrees - How many degrees to move on the color wheel(clockwise)
     *
     *	@return String RGBColor - new rgb color - example #FF00FF
     *	@type String
     *
     * @public
     */	
	getColorByDegrees : function(rgbColor,degrees){
		rgbColor = rgbColor.replace('#','');
		myArray = this.getHsvByRgbCode(rgbColor);
		myArray.hue+=degrees;
		if(myArray.hue>=360)myArray.hue-=360;
		if(myArray.hue<0)myArray.hue+=360;	
		return this.getRgbCodeByHsv(myArray.hue,myArray.saturation,myArray.brightness);
	}
	// }}}	
	,
	// {{{ findColorByBrightness()
    /**
     *	Returns a new rgb color after change of brightness
     * 	
     *	@param String rgbColor - RGB start color
     *	@param Int brightness - Change in brightness (value between -100 and 100)
     *
     *	@return String RGBColor - new rgb color - example #FF00FF
     *	@type String
     *
     * @public
     */		
	findColorByBrightness : function(rgbColor,brightness){
		
		rgbColor = rgbColor.replace('#','');
		myArray = this.getHsvByRgbCode(rgbColor);
		
		myArray.brightness+=brightness/100;
		if(myArray.brightness>1)myArray.brightness=1;
		if(myArray.brightness<0)myArray.brightness=0;	
		
		if(myArray.saturation>1)myArray.saturation=1;
		if(myArray.saturation<0)myArray.saturation=0;		
		
		return this.getRgbCodeByHsv(myArray.hue,myArray.saturation,myArray.brightness);			
	}
	// }}}
	,
	// {{{ getRgbFromNumbers()
    /**
     *	Returns a color in RGB format(e.g.: #FFEECC from numeric values of red, green and blue)
     * 	
     *	@param Int red - Amount of red(0-255)
     *	@param Int green - Amount of green(0-255)
     *	@param Int blue - Amount of blue(0-255)
	 *
     *
     *	@return String RGBColor - new rgb color - example #FF00FF
     *	@type String
     *
     * @public
     */	
	getRgbFromNumbers : function(red,green,blue)
	{
		red = this.baseConverter(red,10,16);
		if(red.length==0)red = '0' + red;
		green = this.baseConverter(green,10,16);
		if(green.length==0)green = '0' + green;
		blue = this.baseConverter(blue,10,16);
		if(blue.length==0)blue = '0' + blue;
		return '#' + red + green + blue;
	}   
	// }}}
	,
	// {{{ getAllWebColors()
    /**
     *	This method returns an array of all web colors
     * 	
	 *
     *
     *	@return Array RGBColors - Numeric array of all web colors (216 colors)
     *	@type String
     *
     * @public
     */		
	getAllWebColors : function()
	{
		var retArray = new Array();
		for(var red=0;red<=15;red+=3){
			for(var green=0;green<=15;green+=3){
				for(var blue=0;blue<=15;blue+=3){
					var newRed = this.baseConverter(red,10,16);			
					var newGreen = this.baseConverter(green,10,16);			
					var newBlue = this.baseConverter(blue,10,16);	
					retArray[retArray.length] = newRed + '' + newRed + '' +newGreen +'' + newGreen +'' + newBlue + '' + newBlue;		
				}
			}
		}
		return retArray;		
	}
	// }}}
	,
	// {{{ getAllNamedColors()
    /**
     *	This method returns an array of all web colors
     * 	
	 *
     *
     *	@return Array Colors - Returns a multi dimensional array of colors, first index separate each color. Each item in the main array will then contain two values: 1) color name, 2) rgb code 
     *	@type Array
     *
     * @public
     */		
	getAllNamedColors : function()
	{
		var c = new Array();
		c[c.length] = ['AliceBlue','F0F8FF'];
		c[c.length] = ['AntiqueWhite','FAEBD7'];
		c[c.length] = ['Aqua','00FFFF'];
		c[c.length] = ['Aquamarine','7FFFD4'];
		c[c.length] = ['Azure','F0FFFF'];
		c[c.length] = ['Beige','F5F5DC'];
		c[c.length] = ['Bisque','FFE4C4'];
		c[c.length] = ['Black','000000'];
		c[c.length] = ['BlanchedAlmond','FFEBCD'];
		c[c.length] = ['Blue','0000FF'];
		c[c.length] = ['BlueViolet','8A2BE2'];
		c[c.length] = ['Brown','A52A2A'];
		c[c.length] = ['BurlyWood','DEB887'];
		c[c.length] = ['CadetBlue','5F9EA0'];
		c[c.length] = ['Chartreuse','7FFF00'];
		c[c.length] = ['Chocolate','D2691E'];
		c[c.length] = ['Coral','FF7F50'];
		c[c.length] = ['CornflowerBlue','6495ED'];
		c[c.length] = ['Cornsilk','FFF8DC'];
		c[c.length] = ['Crimson','DC143C'];
		c[c.length] = ['Cyan','00FFFF'];
		c[c.length] = ['DarkBlue','00008B'];
		c[c.length] = ['DarkCyan','008B8B'];
		c[c.length] = ['DarkGoldenRod','B8860B'];
		c[c.length] = ['DarkGray','A9A9A9'];
		c[c.length] = ['DarkGrey','A9A9A9'];
		c[c.length] = ['DarkGreen','006400'];
		c[c.length] = ['DarkKhaki','BDB76B'];
		c[c.length] = ['DarkMagenta','8B008B'];
		c[c.length] = ['DarkOliveGreen','556B2F'];
		c[c.length] = ['Darkorange','FF8C00'];
		c[c.length] = ['DarkOrchid','9932CC'];
		c[c.length] = ['DarkRed','8B0000'];
		c[c.length] = ['DarkSalmon','E9967A'];
		c[c.length] = ['DarkSeaGreen','8FBC8F'];
		c[c.length] = ['DarkSlateBlue','483D8B'];
		c[c.length] = ['DarkSlateGray','2F4F4F'];
		c[c.length] = ['DarkSlateGrey','2F4F4F'];
		c[c.length] = ['DarkTurquoise','00CED1'];
		c[c.length] = ['DarkViolet','9400D3'];
		c[c.length] = ['DeepPink','FF1493'];
		c[c.length] = ['DeepSkyBlue','00BFFF'];
		c[c.length] = ['DimGray','696969'];
		c[c.length] = ['DimGrey','696969'];
		c[c.length] = ['DodgerBlue','1E90FF'];
		c[c.length] = ['FireBrick','B22222'];
		c[c.length] = ['FloralWhite','FFFAF0'];
		c[c.length] = ['ForestGreen','228B22'];
		c[c.length] = ['Fuchsia','FF00FF'];
		c[c.length] = ['Gainsboro','DCDCDC'];
		c[c.length] = ['GhostWhite','F8F8FF'];
		c[c.length] = ['Gold','FFD700'];
		c[c.length] = ['GoldenRod','DAA520'];
		c[c.length] = ['Gray','808080'];
		c[c.length] = ['Grey','808080'];
		c[c.length] = ['Green','008000'];
		c[c.length] = ['GreenYellow','ADFF2F'];
		c[c.length] = ['HoneyDew','F0FFF0'];
		c[c.length] = ['HotPink','FF69B4'];
		c[c.length] = ['IndianRed ','CD5C5C'];
		c[c.length] = ['Indigo  ','4B0082'];
		c[c.length] = ['Ivory','FFFFF0'];
		c[c.length] = ['Khaki','F0E68C'];
		c[c.length] = ['Lavender','E6E6FA'];
		c[c.length] = ['LavenderBlush','FFF0F5'];
		c[c.length] = ['LawnGreen','7CFC00'];
		c[c.length] = ['LemonChiffon','FFFACD'];
		c[c.length] = ['LightBlue','ADD8E6'];
		c[c.length] = ['LightCoral','F08080'];
		c[c.length] = ['LightCyan','E0FFFF'];
		c[c.length] = ['LightGoldenRodYellow','FAFAD2'];
		c[c.length] = ['LightGray','D3D3D3'];
		c[c.length] = ['LightGrey','D3D3D3'];
		c[c.length] = ['LightGreen','90EE90'];
		c[c.length] = ['LightPink','FFB6C1'];
		c[c.length] = ['LightSalmon','FFA07A'];
		c[c.length] = ['LightSeaGreen','20B2AA'];
		c[c.length] = ['LightSkyBlue','87CEFA'];
		c[c.length] = ['LightSlateGray','778899'];
		c[c.length] = ['LightSlateGrey','778899'];
		c[c.length] = ['LightSteelBlue','B0C4DE'];
		c[c.length] = ['LightYellow','FFFFE0'];
		c[c.length] = ['Lime','00FF00'];
		c[c.length] = ['LimeGreen','32CD32'];
		c[c.length] = ['Linen','FAF0E6'];
		c[c.length] = ['Magenta','FF00FF'];
		c[c.length] = ['Maroon','800000'];
		c[c.length] = ['MediumAquaMarine','66CDAA'];
		c[c.length] = ['MediumBlue','0000CD'];
		c[c.length] = ['MediumOrchid','BA55D3'];
		c[c.length] = ['MediumPurple','9370D8'];
		c[c.length] = ['MediumSeaGreen','3CB371'];
		c[c.length] = ['MediumSlateBlue','7B68EE'];
		c[c.length] = ['MediumSpringGreen','00FA9A'];
		c[c.length] = ['MediumTurquoise','48D1CC'];
		c[c.length] = ['MediumVioletRed','C71585'];
		c[c.length] = ['MidnightBlue','191970'];
		c[c.length] = ['MintCream','F5FFFA'];
		c[c.length] = ['MistyRose','FFE4E1'];
		c[c.length] = ['Moccasin','FFE4B5'];
		c[c.length] = ['NavajoWhite','FFDEAD'];
		c[c.length] = ['Navy','000080'];
		c[c.length] = ['OldLace','FDF5E6'];
		c[c.length] = ['Olive','808000'];
		c[c.length] = ['OliveDrab','6B8E23'];
		c[c.length] = ['Orange','FFA500'];
		c[c.length] = ['OrangeRed','FF4500'];
		c[c.length] = ['Orchid','DA70D6'];
		c[c.length] = ['PaleGoldenRod','EEE8AA'];
		c[c.length] = ['PaleGreen','98FB98'];
		c[c.length] = ['PaleTurquoise','AFEEEE'];
		c[c.length] = ['PaleVioletRed','D87093'];
		c[c.length] = ['PapayaWhip','FFEFD5'];
		c[c.length] = ['PeachPuff','FFDAB9'];
		c[c.length] = ['Peru','CD853F'];
		c[c.length] = ['Pink','FFC0CB'];
		c[c.length] = ['Plum','DDA0DD'];
		c[c.length] = ['PowderBlue','B0E0E6'];
		c[c.length] = ['Purple','800080'];
		c[c.length] = ['Red','FF0000'];
		c[c.length] = ['RosyBrown','BC8F8F'];
		c[c.length] = ['RoyalBlue','4169E1'];
		c[c.length] = ['SaddleBrown','8B4513'];
		c[c.length] = ['Salmon','FA8072'];
		c[c.length] = ['SandyBrown','F4A460'];
		c[c.length] = ['SeaGreen','2E8B57'];
		c[c.length] = ['SeaShell','FFF5EE'];
		c[c.length] = ['Sienna','A0522D'];
		c[c.length] = ['Silver','C0C0C0'];
		c[c.length] = ['SkyBlue','87CEEB'];
		c[c.length] = ['SlateBlue','6A5ACD'];
		c[c.length] = ['SlateGray','708090'];
		c[c.length] = ['SlateGrey','708090'];
		c[c.length] = ['Snow','FFFAFA'];
		c[c.length] = ['SpringGreen','00FF7F'];
		c[c.length] = ['SteelBlue','4682B4'];
		c[c.length] = ['Tan','D2B48C'];
		c[c.length] = ['Teal','008080'];
		c[c.length] = ['Thistle','D8BFD8'];
		c[c.length] = ['Tomato','FF6347'];
		c[c.length] = ['Turquoise','40E0D0'];
		c[c.length] = ['Violet','EE82EE'];
		c[c.length] = ['Wheat','F5DEB3'];
		c[c.length] = ['White','FFFFFF'];
		c[c.length] = ['WhiteSmoke','F5F5F5'];
		c[c.length] = ['Yellow','FFFF00'];
		c[c.length] = ['YellowGreen','9ACD32'];
		return c;		
	}	
}


/*[FILE_START:dhtmlSuite-formUtil.js] */
/************************************************************************************************************
*	Form utility classes
*
*	Created:						February, 22nd, 2007
*	Last updated:					March, 13th, 2007
*	@class Purpose of class:		Form utility classes
*			
*	Css files used by this script:	form-validator.css
*
*	Demos of this class:			demo-form-validator.html
*
* 	Update log:
*
************************************************************************************************************/

/**
* @constructor
* @class Form validator
* Demo: <a href="../../demos/demo-form-validator.html" target="_blank">demo-form-validator.html</a>		
*
* @param Object - propArray - Associative array of properties. Possible keys:<br>
*	formRef - Reference to form<br>
*	indicateWithCss - Indicate error by adding a red or green border around elements. (default = false)
*	keyValidation - Validate as you type. This applies to numeric and letteric characters (default = false)
*	callbackOnFormValid - Name of function to execute when the form is valid
*	callbackOnFormInvalid - Name of function to execute when the form is invalid
*	indicateWithBars - Indicate valid and invalid form elements by a red or green bar at the left of the elements. (default = false)
*	
* @version				1.0
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
**/
DHTMLSuite.formValidator = function(propArray)
{
	var formRef;
	var indicateWithCss;
	var indicateWithBars;
	
	var keyValidation;
	var objectIndex;
	var layoutCSS;
	
	var callbackOnFormValid;
	var callbackOnFormInvalid;
	
	var formElements;
	var masks;	
	var radios;
	var indicationImages;
	var indicationBars;
	var equalToEls;
 	var formUtil;
 	
 
	this.equalToEls= new Object();
	this.equalToEls.from = new Object();
	this.equalToEls.to = new Object();
	
	this.formUtil = new DHTMLSuite.formUtil();
	
	this.masks = new Object();	
	this.indicationImages = new Array();
	this.indicationBars = new Array();
	
	var domainString = '(com|org|net|mil|edu|info|mobi|travel|a[cdfgilmnoqrstuwxz]|b[abdefghijmnorstwyz]|c[acdfghiklmnoruvxyz]|d[ejkmoz]|e[cegrstu]|f[ijkmor]|g[adefghilmnpqrstuwy]|h[kmnrtu]|i[delmnoqrst]|j[emop]|k[eghimnrwyz]|l[abcikrstuvy]|m[acdghklmnopqrstuvwxyz]|n[acefgilopruz]|om|p[aefghklmnrstwy]|qa|r[eouw]|s[abcdeghiklmnrtvyz]|t[cdfghjklmnortvwz]|u[agksyz]|v[aceginu]|w[fs]|y[etu]|z[amw])';
	
	this.masks.email = new RegExp("^[A-Z0-9._%-]+@[A-Z0-9.-]+\\." + domainString + "$","gi");
	this.masks.numeric = /^[0-9]+$/gi;	// Numeric
	this.masks.letter = /^[A-Zæøå]+$/gi;	// letteric
	this.masks.domain = new RegExp("^(https?\:\/\/)?[a-zA-Z0-9]+([a-zA-Z0-9\-\.]+)?\\." + domainString + "$","gi");
	
	this.layoutCSS = 'form-validator.css';
	this.indicateWithCss = false;
	this.indicateWithBars = false;
	this.keyValidation = false;
	this.formElements = new Object();
	this.radios = new Object();	// Array of radio button objects
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();	// This line starts all the init methods
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}
		
	this.objectIndex = DHTMLSuite.variableStorage.arrayDSObjects.length;
	DHTMLSuite.variableStorage.arrayDSObjects[this.objectIndex] = this;	
	
	if(propArray)this.__setInitProps(propArray);
	this.__init();
}
DHTMLSuite.formValidator.prototype = 
{
	// {{{ addMask()
    /**
     *	Add regexp mask
     * 	
     *	@param String maskName - Name of mask, i.e. the value you use in the flag attribute of your form elements.
     *	@param String mask - Example: [0-9]
     *	@param String regexpFlags - Regexp flags, example "gi"
     *
     * @public
     */		
	addMask : function(maskName,regexpPattern,regexpFlags)
	{
		try{
			this.masks[maskName] = new RegExp(regexpPattern,regexpFlags);
		}catch(e){
			alert('Could not create regexp mask of ' + regexpPattern +',flags: ' + regexpFlags);
		}		
	}
	// }}}
	,	
	// {{{ __setInitProps()
    /**
     *	Add regexp mask
     * 	
     *	@param Array props - Array of properties
     *
     * @private
     */	
	__setInitProps : function(props)
	{
		if(props.formRef){
			var obj = DHTMLSuite.commonObj.getEl(props.formRef);
			this.formRef = obj;
		}
		if(props.indicateWithCss || props.indicateWithCss===false)this.indicateWithCss = props.indicateWithCss;
		if(props.keyValidation)this.keyValidation = props.keyValidation;
		if(props.callbackOnFormValid)this.callbackOnFormValid = props.callbackOnFormValid;
		if(props.callbackOnFormInvalid)this.callbackOnFormInvalid = props.callbackOnFormInvalid;
		if(props.indicateWithBars || props.indicateWithBars===false)this.indicateWithBars = props.indicateWithBars;
		if(this.indicateWithCss)this.indicateWithBars = false;
	}
	// }}}
	,	
	// {{{ __init()
    /**
     *	Initializes the widget
     *
     * @private
     */	
	__init : function()
	{
		if(this.formRef){
			var ind = this.objectIndex;
			this.__initiallyParseAForm();	
			this.formRef.onreset = function(){ setTimeout("DHTMLSuite.variableStorage.arrayDSObjects["+ ind +"].__validateAllFields()",50); };
			DHTMLSuite.commonObj.__addEventEl(this.formRef);
			DHTMLSuite.commonObj.addEvent(window,'resize',function() { DHTMLSuite.variableStorage.arrayDSObjects[ind].__positionIndImages(); });			
		}
		DHTMLSuite.commonObj.loadCSS(this.layoutCSS);
	}
	// }}}
	,
	// {{{ __validateAllFields()
    /**
     *	This method is called by events, example when someone resets the form.
     *
     * @private
     */		
	__validateAllFields : function()
	{
		for(var prop in this.formElements){
			this.__validateInput(this.formElements[prop].el);			
		}		
	}
	// }}}
	,
	// {{{ __addRadiosToArray()
    /**
     *	This method add radios and checkboxes with the same name to the radios array
  	 * 	@param HTMLElement el - Reference to a radio button
     *
     * @private
     */		
	__addRadiosToArray : function(el)
	{
		if(!this.radios[el.name]){	// Radio with this name or id has not been added to the array
			this.radios[el.name] = new Array();
			for(var no=0;no<this.formRef.elements.length;no++){
				var formEl = this.formRef.elements[no];
				if(formEl.name==el.name)this.radios[el.name][this.radios[el.name].length] = formEl;
			}
		}		
	}
	// }}}
	,
	// {{{ __initiallyParseAForm()
    /**
     *	Initially parse a form.
     *
     * @private
     */		
	__initiallyParseAForm : function()
	{
		var ind = this.objectIndex;
		var formRef = this.formRef;
		var vElements = new Array();	// Array of elements to parse	
		var inputs = formRef.getElementsByTagName('INPUT');
		for(var no=0;no<inputs.length;no++){	/* Looping through inputs */
			if(!this.__hasValidationAttr(inputs[no]))continue;
			if(inputs[no].type.toLowerCase()=='text' || inputs[no].type.toLowerCase()=='checkbox' || inputs[no].type.toLowerCase()=='radio' || inputs[no].type.toLowerCase()=='password'){
				vElements[vElements.length] = inputs[no];				
			}	
			if(inputs[no].type.toLowerCase()=='radio'){
				this.__addRadiosToArray(inputs[no]);	
			}	
			if(inputs[no].type.toLowerCase()=='checkbox'){
				this.__addRadiosToArray(inputs[no]);	
			}
			
				
		}
		var ta = formRef.getElementsByTagName('TEXTAREA');
		for(var no=0;no<ta.length;no++){	/* Looping through inputs */
			if(!this.__hasValidationAttr(ta[no]))continue;
			vElements[vElements.length] = ta[no];
		}		
		var sel = formRef.getElementsByTagName('SELECT');
		for(var no=0;no<sel.length;no++){	/* Looping through inputs */
			if(!this.__hasValidationAttr(sel[no]))continue;
			vElements[vElements.length] = sel[no];
		}
		for(var no=0;no<vElements.length;no++){
			var elType=vElements[no].tagName.toLowerCase();
			if(elType=='input')elType = vElements[no].type.toLowerCase();
			if(!elType)elType='text';
			
			if(this.indicateWithCss){			
				if(elType=='select')this.__addParentToSelect(vElements[no]);				
				if(elType=='textarea')vElements[no].className = vElements[no].className + ' DHTMLSuite_validInput';
				if(vElements[no].tagName.toLowerCase()=='input' && elType=='text')vElements[no].className = vElements[no].className + ' DHTMLSuite_validInput';
				if(vElements[no].tagName.toLowerCase()=='input' && elType=='checkbox')vElements[no].className = vElements[no].className + ' DHTMLSuite_validInput';
			}
			if(document.getElementById('_' + vElements[no].name)){				
				if(!this.indicationImages[vElements[no].name]){
					this.indicationImages[vElements[no].name] = document.createElement('DIV');				
					var el = this.indicationImages[vElements[no].name];
					document.getElementById('_' + vElements[no].name).appendChild(el);
					el.className = 'DHTMLSuite_validationImage DHTMLSuite_invalidInputImage';
					el.style.height = document.getElementById('_' + vElements[no].name).clientHeight + 'px';
				}
			}
			if(this.indicateWithBars){
				if(!this.indicationBars[vElements[no].name] && elType!='radio' && elType!='checkbox'){					
					this.indicationBars[vElements[no].name] = document.createElement('DIV');				
					var el = this.indicationBars[vElements[no].name];					
					var parent = vElements[no].parentNode;
					parent.insertBefore(el,vElements[no].parentNode.firstChild);
					if(DHTMLSuite.clientInfoObj.isMSIE){	// Firefox doesn't support absolute positioned elements inside relative positioned td tags.
						el.style.left = '0px';
						el.style.top = '0px';
						if(DHTMLSuite.commonObj.getStyle(parent,'position')!='absolute')parent.style.position = 'relative';
					}
					el.innerHTML = '<span></span>';
					el.className = 'DHTMLSuite_validationBar DHTMLSuite_validationBarValid';
					el.style.position='absolute';					
				}			
			}
			
			if(!vElements[no].id)vElements[no].id=DHTMLSuite.commonObj.getUniqueId();
			vElements[no].setAttribute('elementIndex',no);
			this.formElements[vElements[no].name] = new Array();
			this.formElements[vElements[no].name].el = vElements[no].id;
			this.formElements[vElements[no].name].result = false;
			this.__setRegExpPattern(vElements[no]);			
			this.__validateInput(vElements[no]);
			this.__addEvent(vElements[no]);			
		}				
		setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + this.objectIndex + '].__positionIndImages()',50);
	}
	// }}}
	,
	// {{{ __positionIndImages()
    /**
     *	Assign regexp pattern as special attribute of the HTML element.
     *
     * @private
     */	
	__positionIndImages : function()
	{	
		for(var prop in this.indicationBars){
			try{
				var el = this.indicationBars[prop]; 
				var formEl = DHTMLSuite.commonObj.getEl(this.formElements[prop].el);
				var left = (formEl.offsetLeft - el.offsetWidth);
				el.style.marginLeft = left + 'px';	
				el.style.marginTop = '0px';
				if(DHTMLSuite.clientInfoObj.isMSIE)el.style.marginTop = (DHTMLSuite.commonObj.getTopPos(formEl) - DHTMLSuite.commonObj.getTopPos(formEl.parentNode)) + 'px';	
				el.style.height = formEl.offsetHeight + 'px';	
			}catch(e){
				
			}		
		}
		
	}
	// }}}
	,
	// {{{ __setRegExpPattern()
    /**
     *	Assign regexp pattern as special attribute of the HTML element.
     *
     * @private
     */	
	__setRegExpPattern : function(formEl)
	{
		var pat = formEl.getAttribute('regexpPattern');
		if(pat){
			if(pat.indexOf('/')==-1){
				pat = '/' + pat + '/';
				formEl.setAttribute('regexpPattern',pat);
			}
			return;	// Regexp pattern already exists
		}
		var req = formEl.getAttribute('required');
		if(req || req===''){
			pat = '/./';	// Require single character	
		}
		var minLength = formEl.getAttribute('minLength');
		if(minLength){
			var pat = '/';
			for(var no=0;no<minLength;no++)pat = pat + '.';
			pat = pat + '/'	
		}
		var sp = formEl.getAttribute('simplePattern');
		
		var freemask = formEl.getAttribute('freemask');
		if(freemask){			
			var cs = formEl.getAttribute('caseInsensitive');
			cs = cs + '';	
	
			freemask = freemask.replace(/([^NSs])/g,'\\$1');
			freemask = freemask.replace(/N/gi,'[0-9]');
			freemask = freemask.replace(/s/g,'[a-z]');
			freemask = freemask.replace(/S/g,'[A-Z]');
			freemask = '/^' + freemask + '$/';
			if(cs || cs==='')freemask = freemask + 'i';
			pat = freemask;			
		}
		var mask = formEl.getAttribute('mask');
		if(mask){
			try{
				pat = mask;
			}catch(e){
			}			
		}
		formEl.setAttribute('regexpPattern',pat);
		formEl.setAttribute('regexpFlag',pat);
		
		var equalTo = formEl.getAttribute('equalTo');
		if(equalTo){
			try{
				this.equalToEls.from[formEl.name] = DHTMLSuite.commonObj.getEl(equalTo);	
				this.equalToEls.to[equalTo] = formEl;
				// Avoid circular references		
				this.equalToEls.from[equalTo] = false;		
				this.equalToEls.to[formEl.name] = false;				
			}catch(e){
			}
		}
	}
	// }}}
	,
	// {{{ __addEvent()
    /**
     *	Add event to a form element.
     *	@param Object formEl - referenc eto form element.
     *
     * @private
     */	
	__addEvent : function(formEl)
	{
		var ind = this.objectIndex;
		var id = formEl.id;
		DHTMLSuite.commonObj.addEvent(formEl,'change',function() { DHTMLSuite.variableStorage.arrayDSObjects[ind].__validateInput(id); });		
		// formEl.onchange = function() { DHTMLSuite.variableStorage.arrayDSObjects[ind].__validateInput(id); };
		formEl.onpaste = function() { DHTMLSuite.variableStorage.arrayDSObjects[ind].__validateInput(id); };
		formEl.onblur = function() { DHTMLSuite.variableStorage.arrayDSObjects[ind].__validateInput(id); };
		formEl.onkeyup = function() { DHTMLSuite.variableStorage.arrayDSObjects[ind].__validateInput(id); };
		formEl.onclick = function() { DHTMLSuite.variableStorage.arrayDSObjects[ind].__validateInput(id); };
		if(this.keyValidation){
			formEl.onkeypress = function(e) { return DHTMLSuite.variableStorage.arrayDSObjects[ind].__validateKey(e,id); };
			formEl.onpaste = function() { setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__validatePaste("' + id + '")',2) };
		}
		DHTMLSuite.commonObj.__addEventEl(formEl);
	}
	// }}}
	,
	// {{{ __validatePaste()
    /**
     *	Validate pasted data and remove non-valid characters from the input
     *	@param String elRef - Id of form element
     *
     * @private
     */	
	__validatePaste : function(elRef)
	{
		var src = DHTMLSuite.commonObj.getEl(elRef);
		var pat = src.getAttribute('regexpPattern');
		if(pat == 'letter')src.value = src.value.replace(/[^a-z]/gi,'');
		if(pat == 'numeric')src.value = src.value.replace(/[^0-9]/g,'');
		if(pat=='letter' || pat=='numeric')this.__validateInput(elRef);
	}
	// }}}
	,
	// {{{ __validateKey()
    /**
     *	Validate key stroke
     *	@param Event e - Event object - used to find key code
     *	@param String elRef - Id of form element
     *
     * @private
     */	
	__validateKey : function(e,elRef)
	{
		if(document.all)e = event;	
		if(e.ctrlKey || e.altKey)return true;	
		var src = DHTMLSuite.commonObj.getSrcElement(e);
		var pat = src.getAttribute('regexpPattern');	
		var code = DHTMLSuite.commonObj.getKeyCode(e);
		var key = DHTMLSuite.commonObj.getKeyFromEvent(e);		
		if(code<48 && code!=32)return true;		
		if(key=='\t')return true;// Tabulator
		if(pat == 'letter'){
			if(code==192 || code==222 || code==221)return true;	// Scandinavian characters
			if(!key.match(/[a-z]/gi))return false;
		}
		if(pat == 'numeric' && !key.match(/[0-9]/g))return false;
		return true;	// Not yet implemented
	}
	// }}}
	,
	// {{{ __hasValidationAttr()
    /**
     *	Should this form element be validated - look for attributes
     *
     * @private
     */	
	__hasValidationAttr : function(el)
	{
		var req = el.getAttribute('required');
		if(req || req==='')return true;
		var mask = el.getAttribute('mask');
		if(mask)return true;
		var mask = el.getAttribute('freemask');
		if(mask)return true;
		var regexp = el.getAttribute('regexpPattern');
		if(regexp)return true;
		var equalTo = el.getAttribute('equalTo');
		if(equalTo)return true;
		return false;	
	}
	// }}}
	,
	// {{{ __addParentToSelect()
    /**
     *	Create parent div for select boxes.
     *
     * @private
     */		
	__addParentToSelect : function(selectRef)
	{
		var div = document.createElement('DIV');
		selectRef.parentNode.insertBefore(div,selectRef);
		div.appendChild(selectRef);
		div.className = 'DHTMLSuite_validInput';
		div.style.cssText = 'display:inline-block;';
		div.style.width = selectRef.offsetWidth + 'px';
	}
	// }}}
	,
	// {{{ __validateInput()
    /**
     *	Validate input
     *	@param Object inputRef - Reference to form element
     *
     * @private
     */	
	__validateInput : function(inputRef)
	{
		
		inputRef = DHTMLSuite.commonObj.getEl(inputRef);
		var index = inputRef.name;
		
		if(this.__isInputValid(inputRef)){
			this.formElements[index].result = true;
			this.__toggleInput(inputRef,'valid');
		}else{
			this.formElements[index].result = false;
			this.__toggleInput(inputRef,'invalid');
		}
		
		this.__validateForm();
	}
	// }}}
	,
	// {{{ __isInputValid()
    /**
     *	Validate input
     *	@param Object inputRef - reference to form element
     *
     * @private
     */	
	__isInputValid : function(inputRef,circular)
	{
		var required = inputRef.getAttribute('required');
		var elType = 'select';
		if((inputRef.tagName.toLowerCase()=='input' && (inputRef.type.toLowerCase()=='text' || inputRef.type.toLowerCase()=='password')) || inputRef.tagName.toLowerCase()=='textarea')elType = 'text';
		if(inputRef.tagName.toLowerCase()=='input' && inputRef.type.toLowerCase()=='checkbox')elType = 'checkbox';
		if(inputRef.tagName.toLowerCase()=='input' && inputRef.type.toLowerCase()=='radio')elType = 'radio';
		
		// equalTo attribute set?
		if(this.equalToEls.from[inputRef.name]){	
			var equal = this.formUtil.areEqual(inputRef,this.equalToEls.from[inputRef.name]);
			if(!equal)return false;			
		}
		// equalTo attribute set?
		if(this.equalToEls.to[inputRef.name]){	
			this.__validateInput(this.equalToEls.to[inputRef.name]);			
		}
			
		if(elType=='text'){
			if((!required && required!='') && inputRef.value.length==0)return true;
			var pat = inputRef.getAttribute('regexpPattern');
			if(pat.indexOf('/')==-1)pat = this.masks[pat];else pat = eval(pat);
			if(inputRef.value.trim().match(pat)){
				var matches = inputRef.value.trim().match(pat);
				var minLength = inputRef.getAttribute('minLength');
				if(minLength)if(inputRef.value.trim().length<minLength)return false;
				return true; 
			}else return false;
		}
		if(elType=='select'){
			var multiple = inputRef.getAttribute('multiple');
			if(multiple || multiple===''){
				if(required || required===''){
					for(var no=0;no<inputRef.options.length;no++){
						if(inputRef.options[no].selected && inputRef.options[no].value)return true;
					}
					return false;					
				}
			}else{
				if(required || required==='' && !inputRef.options[inputRef.selectedIndex].value)return false;	
			}		
		}

		if(elType=='radio' || elType=='checkbox'){
			var name = inputRef.name;
			var elChecked = false;
			for(var no=0;no<this.radios[name].length;no++){
				if(this.radios[name][no].checked)elChecked = true;	
			}
			if(!elChecked)return false;
		}
		return true;
	}
	// }}}
	,
	// {{{ __toggleInput()
    /**
     *	Toggle input, i.e. style it depending on if it's valid or not.
     *	@param Object inputRef - reference to form element
     *	@param String style - "valid" or "invalid"
     *
     * @private
     */	
	__toggleInput : function(inputRef,style)
	{
		var el = inputRef;
		
		if(this.indicationImages[el.name]){			
			var obj= this.indicationImages[el.name];
			obj.className = obj.className.replace(' DHTMLSuite_invalidInputImage','');
			obj.className = obj.className.replace(' DHTMLSuite_validInputImage','');
			if(style=='valid'){
				obj.className = obj.className + ' DHTMLSuite_validInputImage';
			}else{
				obj.className = obj.className + ' DHTMLSuite_invalidInputImage';
			}
		}
		if(this.indicateWithBars){
			var obj = this.indicationBars[el.name];
			if(!obj)return;
			obj.className = obj.className.replace(' DHTMLSuite_validationBarValid','');
			obj.className = obj.className.replace(' DHTMLSuite_validationBarInvalid','');
			if(style=='valid'){
				obj.className = obj.className + ' DHTMLSuite_validationBarValid';
			}else{
				obj.className = obj.className + ' DHTMLSuite_validationBarInvalid';
			}						
		}
		
		if(this.indicateWithCss){
			if(el.tagName.toLowerCase()=='select')el = el.parentNode;
			if(el.className.indexOf('DHTMLSuite_')==-1)return;
			el.className = el.className.replace(' DHTMLSuite_invalidInput','');
			el.className = el.className.replace(' DHTMLSuite_validInput','');
						
			if(style=='valid'){
				el.className = el.className + ' DHTMLSuite_validInput';				
			}else{			
				el.className = el.className + ' DHTMLSuite_invalidInput';	
			}
		}
	}
	// }}}
	,
	// {{{ isFormValid()
    /**
     *	Returns true if the form is valid, false otherwise
     *
     * @public
     */	
	isFormValid : function()
	{
		for(var no in this.formElements){
			if(!this.formElements[no].result){				
				return false;
			}
		}		
		return true;		
	}
	// }}}
	,
	// {{{ __validateForm()
    /**
     *	Validate form
     *
     * @private
     */		
	__validateForm : function()
	{
		if(this.isFormValid()){
			this.__handleCallback('formValid');
		}else{ 
			this.__handleCallback('formInvalid');
		}
	}
	// }}}
	,
	// {{{ __handleCallback()
    /**
     *	Execute call back functions.
     *
     * @private
     */	
	__handleCallback : function(action)
	{
		var callbackString = '';
		switch(action){
			case "formValid":
				if(this.callbackOnFormValid)callbackString = this.callbackOnFormValid;
				break;
			case "formInvalid":
				if(this.callbackOnFormInvalid)callbackString = this.callbackOnFormInvalid;
				break;			
		}			
		if(callbackString){
			callbackString = callbackString + '(this.formElements)';
			eval(callbackString);
		}	
	}
}


/************************************************************************************************************
*	Form submission class
*
*	Created:						March, 6th, 2007
*	@class Purpose of class:		Ajax form submission class
*			
*	Css files used by this script:	
*
*	Demos of this class:			demo-form-validator.html
*
* 	Update log:
*
************************************************************************************************************/


/**
* @constructor
* @class Form submission
* Demo: <a href="../../demos/demo-form-validator.html" target="_blank">demo-form-validator.html</a>		
*
* @param Object - formRef - Reference to form
* @version				1.0
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
**/

DHTMLSuite.formUtil = function()
{
	
	
	
}
	
DHTMLSuite.formUtil.prototype = 
{
	// {{{ getFamily
    /**
     *	Return an array of elements with the same name
     *	@param Object el - Reference to form element
     *	@param Object formRef - Reference to form
     *
     * @public
     */		
	getFamily : function(el,formRef)
	{
		var els = formRef.elements;
		var retArray = new Array();
		for(var no=0;no<els.length;no++){
			if(els[no].name == el.name)retArray[retArray.length] = els[no];
		}
		return retArray;		
	}
	// }}}
	,
	// {{{ hasFileInputs()
    /**
     *	Does the form has file inputs?
     *	@param Object formRef - Reference to form
     *
     * @public
     */		
	hasFileInputs : function(formRef)
	{
		var els = formRef.elements;
		for(var no=0;no<els.length;no++){
			if(els[no].tagName.toLowerCase()=='input' && els[no].type.toLowerCase()=='file')return true;	
		}
		return false;
	}
	// }}}
	,	
	// {{{ getValuesAsArray()
    /**
     *	Return value of form as associative array
     *	@param Object formRef - Reference to form
     *
     * @public
     */		
	getValuesAsArray : function(formRef)
	{
		var retArray = new Object();
		formRef = DHTMLSuite.commonObj.getEl(formRef);
		var els = formRef.elements;
		for(var no=0;no<els.length;no++){
			if(els[no].disabled)continue;
			var tag = els[no].tagName.toLowerCase();
			switch(tag){
				case "input": 
					var type = els[no].type.toLowerCase();
					if(!type)type='text';
					switch(type){
						case "text":
						case "image":
						case "hidden":
						case "password":
							retArray[els[no].name] = els[no].value;
							break;
						case "checkbox":
							var boxes = this.getFamily(els[no],formRef);
							if(boxes.length>1){
								retArray[els[no].name] = new Array();
								for(var no2=0;no2<boxes.length;no2++){
									if(boxes[no2].checked){
										var index = retArray[els[no].name].length;
										retArray[els[no].name][index] = boxes[no2].value;
									}
								}								
							}else{
								if(els[no].checked)retArray[els[no].name] = els[no].value;
							}
							break;	
						case "radio":
							if(els[no].checked)retArray[els[no].name] = els[no].value;
							break;		
						
					}	
					break;	
				case "select":
					var string = '';			
					var mult = els[no].getAttribute('multiple');
					if(mult || mult===''){
						retArray[els[no].name] = new Array();
						for(var no2=0;no2<els[no].options.length;no2++){
							var index = retArray[els[no].name].length;
							if(els[no].options[no2].selected)retArray[els[no].name][index] = els[no].options[no2].value;	
						}
					}else{
						retArray[els[no].name] = els[no].options[els[no].selectedIndex].value;
					}
					break;	
				case "textarea":
					retArray[els[no].name] = els[no].value;
					break;					
			}			
		}
		return retArray;		
	}
	// }}}
	,	
	// {{{ getValue()
    /**
     *	Return value of form element
     *	@param Object formEl - Reference to form element
     *
     * @public
     */
	getValue : function(formEl)
	{
		switch(formEl.tagName.toLowerCase()){
			case "input":
			case "textarea": return formEl.value;
			case "select": return formEl.options[formEl.selectedIndex].value;			
		}
		
	}
	// }}}
	,	
	// {{{ areEqual()
    /**
     *	Check if two form elements have the same value
     *	@param Object input1 - Reference to form element
     *	@param Object input2 - Reference to form element
     *
     * @public
     */	
	areEqual : function(input1,input2)
	{
		input1 = DHTMLSuite.commonObj.getEl(input1);
		input2 = DHTMLSuite.commonObj.getEl(input2);	
		if(this.getValue(input1)==this.getValue(input2))return true;
		return false;		
	}	
}
	
/************************************************************************************************************
*	Form submission class
*
*	Created:						March, 6th, 2007
*	@class Purpose of class:		Ajax form submission class
*			
*	Css files used by this script:	form.css
*
*	Demos of this class:			demo-form-validator.html
*
* 	Update log:
*
************************************************************************************************************/


/**
* @constructor
* @class Form submission
* Demo: <a href="../../demos/demo-form-validator.html" target="_blank">demo-form-validator.html</a>		
*
* @param Associative array of properties, possible keys: <br>
*	formRef - Reference to form<br>
*	method - How to send the form, "GET" or "POST", default is "POST"
*	reponseEl - Where to display response from ajax
*	action - Where to send form data
*	responseFile - Alternative response file. This will be loaded dynamically once the script receives response from the file specified in "action".
*		
* @version				1.0
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
**/

DHTMLSuite.form = function(propArray)
{
	var formRef;
	var method;
	var responseEl;
	var action;
	var responseFile;
	
	var formUtil;
	var objectIndex;
	var sackObj;
	var coverDiv;
	var layoutCSS;
	var iframeName;
	
	this.method = 'POST';
	this.sackObj = new Array();
	this.formUtil = new DHTMLSuite.formUtil();
	this.layoutCSS = 'form.css';
	
	
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();	// This line starts all the init methods
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}
		
	this.objectIndex = DHTMLSuite.variableStorage.arrayDSObjects.length;
	DHTMLSuite.variableStorage.arrayDSObjects[this.objectIndex] = this;	
		
	DHTMLSuite.commonObj.loadCSS(this.layoutCSS);
	
	if(propArray)this.__setInitProperties(propArray);
	
}
DHTMLSuite.form.prototype = 
{
	// {{{ submit()
    /**
     *	Submits the form
     *
     * @public
     */		
	submit : function()
	{
		this.__createCoverDiv();
		var index = this.sackObj.length;
		if(this.formUtil.hasFileInputs(this.formRef)){
			this.__createIframe();
			this.formRef.submit();
			
		}else{
			this.__createSackObject(index);			
			this.__populateSack(index);			
			this.sackObj[index].runAJAX();
		}
		this.__positionCoverDiv();
		return false;
	}
	// }}}
	,
	__createIframe : function()
	{
		if(this.iframeName)return;
		var ind = this.objectIndex;
		var div = document.createElement('DIV');
		document.body.appendChild(div);
		this.iframeName = 'DHTMLSuiteForm' + DHTMLSuite.commonObj.getUniqueId();
		div.innerHTML = '<iframe style="visibility:hidden;width:5px;height:5px" id="' + this.iframeName + '" name="' + this.iframeName + '" onload="parent.DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__getIframeResponse()"></iframe>'; 
		this.formRef.method = this.method;
		this.formRef.action = this.action;
		this.formRef.target = this.iframeName;	
		if(!this.formRef.enctype)this.formRef.enctype = 'multipart/form-data';
			
	}
	// }}}
	,
	// {{{ __getIframeResponse()
    /**
     *	Form has been submitted to iframe - move content from iframe
     *
     * @private
     */	
	__getIframeResponse : function()
	{
		if(this.responseEl){		
			if(this.responseFile){
				if(!this.responseEl.id)this.responseEl.id = 'DHTMLSuite_formResponse' + DHTMLSuite.getUniqueId();
				var dynContent = new DHTMLSuite.dynamicContent();
				dynContent.loadContent(this.responseEl.id,this.responseFile);				
			}else{			
				this.responseEl.innerHTML = self.frames[this.iframeName].document.body.innerHTML;	
				DHTMLSuite.commonObj.__evaluateJs(this.responseEl);
				DHTMLSuite.commonObj.__evaluateCss(this.responseEl);	
			}						
		}	
		this.coverDiv.style.display='none';
		this.__handleCallback('onComplete');
	}
	// }}}
	,
	// {{{ __positionCoverDiv()
    /**
     *	Position cover div
     *
     * @private
     */	
	__positionCoverDiv : function()
	{
		if(!this.responseEl)return;
		try{
			var st = this.coverDiv.style;
			st.left = DHTMLSuite.commonObj.getLeftPos(this.responseEl) + 'px';	
			st.top = DHTMLSuite.commonObj.getTopPos(this.responseEl) + 'px';	
			st.width = this.responseEl.offsetWidth + 'px';	
			st.height = this.responseEl.offsetHeight + 'px';	
			st.display='block';
		}catch(e){
		}
	}
	// }}}
	,
	// {{{ __createCoverDiv()
    /**
     *	Submits the form
     *
     * @private
     */		
	__createCoverDiv : function()
	{	
		if(this.coverDiv)return;
		this.coverDiv = document.createElement('DIV');
		var el = this.coverDiv;
		el.style.overflow='hidden';
		el.style.zIndex = 1000;
		el.style.position = 'absolute';

		document.body.appendChild(el);
		
		var innerDiv = document.createElement('DIV');
		innerDiv.style.width='105%';
		innerDiv.style.height='105%';
		innerDiv.className = 'DHTMLSuite_formCoverDiv';
		innerDiv.style.opacity = '0.2';
		innerDiv.style.filter = 'alpha(opacity=20)';		
		el.appendChild(innerDiv);
		
		var ajaxLoad = document.createElement('DIV');
		ajaxLoad.className = 'DHTMLSuite_formCoverDiv_ajaxLoader';
		el.appendChild(ajaxLoad);		
	}
	// }}}
	,
	// {{{ __createSackObject()
    /**
     *	Create new sack object
     *
     * @private
     */		
	__createSackObject : function(ajaxIndex)
	{		
		var ind = this.objectIndex;
		this.sackObj[ajaxIndex] = new sack();
		this.sackObj[ajaxIndex].requestFile = this.action;	
		this.sackObj[ajaxIndex].method = this.method;		
		this.sackObj[ajaxIndex].onCompletion = function(){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__getResponse(ajaxIndex); }
	}
	// }}}
	,
	// {{{ __getResponse()
    /**
     *	Get response from ajax
     *
     * @private
     */	
	__getResponse : function(ajaxIndex)
	{

		if(this.responseEl){			
			if(this.responseFile){
				if(!this.responseEl.id)this.responseEl.id = 'DHTMLSuite_formResponse' + DHTMLSuite.getUniqueId();
				var dynContent = new DHTMLSuite.dynamicContent();
				dynContent.loadContent(this.responseEl.id,this.responseFile);				
			}else{			
				this.responseEl.innerHTML = this.sackObj[ajaxIndex].response;
				DHTMLSuite.commonObj.__evaluateJs(this.responseEl);
				DHTMLSuite.commonObj.__evaluateCss(this.responseEl);	
			}				
		}	
		
		this.coverDiv.style.display='none';
		this.sackObj[ajaxIndex] = null;
		this.__handleCallback('onComplete');
	}
	// }}}
	,
	// {{{ __populateSack()
    /**
     *	Populate sack object with form data
     *	@param ajaxIndex - index of current sack object
     *
     * @private
     */	
	__populateSack : function(ajaxIndex)
	{
		var els = this.formUtil.getValuesAsArray(this.formRef);		
		for(var prop in els){
			if(DHTMLSuite.commonObj.isArray(els[prop])){
				for(var no=0;no<els[prop].length;no++){
					var name = prop + '[' + no + ']';
					if(prop.indexOf('[')>=0){ // The name of the form field is already indicating an array
						name = prop.replace('[','[' + no);	
					}
					this.sackObj[ajaxIndex].setVar(name,els[prop][no]);	
				}
			}else{
				this.sackObj[ajaxIndex].setVar(prop,els[prop]);			
			}			
		}		
	}
	// }}}
	,
	// {{{ __setInitProperties()
    /**
     *	Fill object with data sent to the constructor
     *	@param Array props - Associative Array("Object") of properties
     *
     * @private
     */		
	__setInitProperties : function(props)
	{
		if(props.formRef)this.formRef = DHTMLSuite.commonObj.getEl(props.formRef);
		if(props.method)this.method = props.method;
		if(props.responseEl)this.responseEl = DHTMLSuite.commonObj.getEl(props.responseEl);
		if(props.action)this.action = props.action;
		if(props.responseFile)this.responseFile = props.responseFile;
		if(props.callbackOnComplete)this.callbackOnComplete = props.callbackOnComplete;
		if(!this.action)this.action = this.formRef.action;
		if(!this.method)this.method = this.formRef.method;
	}	
	// }}}
	,
	// {{{ __handleCallback()
    /**
     *	Execute callback
     *	@param String action - Which callback action
     *
     * @private
     */	
	__handleCallback : function(action)
	{
		var callbackString = '';
		switch(action){
			case "onComplete":
				callbackString = this.callbackOnComplete;
				break;	
			
			
		}	
		if(callbackString){
			if(callbackString.indexOf('(')==-1)callbackString = callbackString + '("' + this.formRef.name + '")';
			eval(callbackString);
		}
		
	}
}