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 = 'gray';
if(!window.DHTML_SUITE_THEME_FOLDER)var DHTML_SUITE_THEME_FOLDER = '../themes/';

var DHTMLSuite = new Object();

var standardObjectsCreated = false;	
DHTMLSuite.eventEls = new Array();	

var widgetDep = new Object();
	// Widget dependencies


var depCache = new Object();


DHTMLSuite.createStandardObjects = function(){
	DHTMLSuite.clientInfoObj = new DHTMLSuite.clientInfo();
	DHTMLSuite.clientInfoObj.init();
	if(!DHTMLSuite.configObj){	
		DHTMLSuite.configObj = new DHTMLSuite.config();	
		DHTMLSuite.configObj.init();
	}
	DHTMLSuite.commonObj = new DHTMLSuite.common();	
	DHTMLSuite.variableStorage = new DHTMLSuite.globalVariableStorage();;	
	DHTMLSuite.commonObj.init();
	DHTMLSuite.domQueryObj = new DHTMLSuite.domQuery();

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

	standardObjectsCreated = true;
}


DHTMLSuite.config = function(){
	var imagePath;	
	var cssPath;	

	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.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()
	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 = {

}


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 : 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 : 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()
	
	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]);
		}
	}
}



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;
	}
}


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 = {
}


DHTMLSuite.tableWidgetPageHandler=function(){
	var tableRef;
	// Reference to object of class DHTMLSuite.tableWidget
	var targetRef;
	// Where to insert the pagination.

	var txtPrevious;
	// Label-"Previous"
	var txtNext;
	// Label-"Next"
	var txtFirst;
	// Label-"First"
	var txtLast;
	// Label-"last"

	var txtResultPrefix;
	// Prefix:result-default="Result: "
	var txtResultTo;
	// Text label Result: 1 "to" 10 of 51-default value="to"
	var txtResultOf;
	// Text label Result: 1 to 10 "of" 51-default value="of"

	var totalNumberOfRows;
	// Total number of rows in dataset
	var rowsPerPage;
	// Number of rows per page.

	var layoutCSS;
	// Name of CSS file for the table widget.
	var activePageNumber;
	// Active page number
	var mainDivEl;
	// Reference to main div for the page handler
	var resultDivElement;
	// Reference to div element which is parent for the result
	var pageListDivEl;
	// Reference to div element which is parent to pages [1],[2],[3]...[Next]

	var objectIndex;
	// Index of this widget in the arrayDSObjects array

	var linkPagePrefix;
	// Text in front of each page link
	var linkPageSuffix;
	// Text behind each page link

	var maximumNumberOfPageLinks;
	// Maximum number of page links.
	var callbackOnAfterNavigate;
	// Callback function-executed when someone navigates to a different page
	this.txtPrevious='Previous';
	// Default label
	this.txtNext='Next';
	// Default label
	this.txtResultPrefix='Result: ';
	// Default label
	this.txtResultTo='to';
	// Default label
	this.txtResultOf='of';
	// Default label
	this.txtFirst='First';
	this.txtLast='Last';

	this.tableRef=false;
	this.targetRef=false;
	this.totalNumberOfRows=false;
	this.activePageNumber=0;
	this.layoutCSS='table-widget-page-handler.css';

	this.linkPagePrefix='';
	this.linkPageSuffix='';
	this.maximumNumberOfPageLinks=false;
	this.callbackOnAfterNavigate=false;

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

}

DHTMLSuite.tableWidgetPageHandler.prototype={

	// {{{ setTableRef()
	 /**
	  *	Connect to a tableWidget object.
	  *
	 *	@param Object tableRef=An object of class DHTMLSuite.tableWidget. It makes it possible for the tableWidget and this object to communicate.
	 *
	 *@public
	  */
	setTableRef:function(tableRef){
		this.tableRef=tableRef;
		this.tableRef.setPageHandler(this);
	}

	// }}}
	,

	// {{{ setTargetId()
	 /**
	  *	Where do you want to insert the navigation links for the table
	  *
	 *	@param String idOfHTMLElement=Id of HTML Element on your page.
	 *
	 *@public
	  */
	setTargetId:function(idOfHTMLElement){
		if(!document.getElementById(idOfHTMLElement)){
			alert('ERROR IN tableWidgetPageHandler.setTargetId:\nElement with id '+idOfHTMLElement+' does not exists');
			return;
		}
		this.targetRef=document.getElementById(idOfHTMLElement);
	}

	// }}}
	,

	// {{{ setTxtPrevious()
	 /**
	  *	Set text label (previous page link)
	  *
	 *	@param String newText=Text previous page link
	 *
	 *@public
	  */
	setTxtPrevious:function(newText){
		this.txtPrevious=newText;
	}

	// }}}
	,

	// {{{ setLinkPagePrefix()
	 /**
	  *	Set text/characters in front of each page link, example "[" to get page number in brackets
	  *
	 *	@param String linkPagePrefix=Character(s)in front of page links
	 *
	 *@public
	  */
	setLinkPagePrefix:function(linkPagePrefix){
		this.linkPagePrefix=linkPagePrefix;
	}

	// }}}
	,

	// {{{ setLinkPageSuffix()
	 /**
	  *	Set text/characters in front of each page link, example "[" to get page number in brackets
	  *
	 *	@param String linkPageSuffix=Character(s)in front of page links
	 *
	 *@public
	  */
	setLinkPageSuffix:function(linkPageSuffix){
		this.linkPageSuffix=linkPageSuffix;
	}

	// }}}
	,

	// {{{ setTxtNext()
	 /**
	  *	Set text label (next page link)
	  *
	 *	@param String newText=Text next page link
	 *
	 *@public
	  */
	setTxtNext:function(newText){
		this.txtNext=newText;
	}

	// }}}
	,

	// {{{ setTxtResultOf()
	 /**
	  *	Set text label ("of"-result)
	  *
	 *	@param String txtResultOf=Result of search, the "of" label ( Result: 1 to 10 "of" 51 )
	 *
	 *@public
	  */
	setTxtResultOf:function(txtResultOf){
		this.txtResultOf=txtResultOf;
	}

	// }}}
	,

	// {{{ setTxtResultTo()
	 /**
	  *	Set text label ("to"-result)
	  *
	 *	@param String txtResultTo=Result of search, the "to" label ( Result: 1 "to" 10 of 51 )
	 *
	 *@public
	  */
	setTxtResultTo:function(txtResultTo){
		this.txtResultTo=txtResultTo;
	}

	// }}}
	,

	// {{{ setTxtResultPrefix()
	 /**
	  *	Set text label (prefix-result)
	  *
	 *	@param String txtResultPrefix=Text next page link
	 *
	 *@public
	  */
	setTxtResultPrefix:function(txtResultPrefix){
	this.txtResultPrefix=txtResultPrefix;
	}

	// }}}
	,

	// {{{ setTxtFirstPage()
	 /**
	  *	Set text label ("Last" page)
	  *
	 *	@param String txtFirst=Label of link to "First" page ( default="First" ).This option is only used when you are limiting the number of pages shown.
	 *
	 *@public
	  */
	setTxtFirstPage:function(txtFirst){
		this.txtFirst=txtFirst;
	}

	// }}}
	,

	// {{{ setTxtLastPage()
	 /**
	  *	Set text label ("First" page)
	  *
	 *	@param String txtLast=Label of link to "Last" page ( default="Last" ).This option is only used when you are limiting the number of pages shown.
	 *
	 *@public
	  */
	setTxtLastPage:function(txtLast){
		this.txtLast=txtLast;
	}

	// }}}
	,

	// {{{ setTotalNumberOfRows()
	 /**
	  *	Specify total number of rows in the entire dataset
	  *
	 *	@param Integer totalNumberOfRows=Total number of rows in the entire dataset.
	 *
	 *@public
	  */
	setTotalNumberOfRows:function(totalNumberOfRows){
		this.totalNumberOfRows=totalNumberOfRows;
	}

	// }}}
	,

	// {{{ setCallbackOnAfterNavigate()
	 /**
	 *Specify call back function to execute after page navigatoin
	  *
	 *@param String callbackOnAfterNavigate-name of javascript function.
	  *
	 *@public
	  */
	setCallbackOnAfterNavigate:function(callbackOnAfterNavigate){
		this.callbackOnAfterNavigate=callbackOnAfterNavigate;
	}

	// }}}
	,

	// {{{ setLayoutCss()
	 /**
	 *set new CSS file
	  *
	 *@param String cssFileName-name of new css file(example: drag-drop.css). Has to be set before init is called.
	  *
	 *@public
	  */
	setLayoutCss:function(layoutCSS){
		this.layoutCSS=layoutCSS;
	}

	// }}}
	,

	// {{{ setMaximumNumberOfPageLinks()
	 /**
	 *Set maximum number of page links displayed below the table, i.e. if you have 50 pages, you can limit number of page links to 10 by sending 10 to this method.
	  *
	 *@param Integer maximumNumberOfPageLinks-(0 or false means=no limitation)
	  *
	 *@public
	  */
	setMaximumNumberOfPageLinks:function(maximumNumberOfPageLinks){
		this.maximumNumberOfPageLinks=maximumNumberOfPageLinks;
	}

	// }}}
	,

	// {{{ init()
	 /**
	 *Initializes the script widget. Set methods should be called before your call this method.
	  *
	  *
	 *@public
	  */
	init:function(){
		this.rowsPerPage=this.tableRef.getServersideSortNumberOfRows();
		DHTMLSuite.commonObj.loadCSS(this.layoutCSS);
		this.__createMainDivEls();
		this.setHTMLOfResultList();
		this.__createPageLinks();
		this.goToPage(1);
	}

	// }}}
	,

	// {{{ __createMainDivEls()
	 /**
	 *Create main div elements for the page handler
	  *
	  *
	 *@private
	  */
	__createMainDivEls:function(){
		if(!this.targetRef){
			alert('Error creating table widget page handler. Remember to specify targetRef');
			return;
		}
		this.mainDivEl=document.createElement('DIV');
		this.mainDivEl.className='DHTMLSuite_tableWidgetPageHandler_mainDiv';
		this.targetRef.appendChild(this.mainDivEl);

		this.resultDivElement=document.createElement('DIV');
		this.resultDivElement.className='DHTMLSuite_tableWidgetPageHandler_result';
		this.mainDivEl.appendChild(this.resultDivElement);

		this.pageListDivEl=document.createElement('DIV');
		this.pageListDivEl.className='DHTMLSuite_tableWidgetPageHandler_pageList';
		this.mainDivEl.appendChild(this.pageListDivEl);
	}

	,

	// {{{ setHTMLOfResultList()
	 /**
	  *
	 *	Create result list div
	  *
	 *
	 *
	 *@public
	  */
	setHTMLOfResultList:function(){
		this.resultDivElement.innerHTML='';
		var html=this.txtResultPrefix+(((this.activePageNumber-1)* this.rowsPerPage)+1)+' '+this.txtResultTo+' '+Math.min(this.totalNumberOfRows,(this.activePageNumber*this.rowsPerPage))+' '+this.txtResultOf+' '+this.totalNumberOfRows;
		this.resultDivElement.innerHTML=html;
	}

	// }}}
	,

	// {{{ __createPageLinks()
	 /**
	  *
	 *	Create page links
	  *
	 *@private
	  */
	__createPageLinks:function(){
		var ind=this.objectIndex;
		this.pageListDivEl.innerHTML='';
		// Clearing the div element if it allready got content.
		var numberOfPages=Math.ceil(this.totalNumberOfRows/this.rowsPerPage);

		/* link to first page */
		if(this.maximumNumberOfPageLinks&&this.maximumNumberOfPageLinks<numberOfPages){
			var span=document.createElement('SPAN');
			span.innerHTML=this.linkPagePrefix;
			this.pageListDivEl.appendChild(span);
			span.className='DHTMLSuite_pageHandler_firstLink';

			var fl=document.createElement('A');
		// "first" link
			fl.innerHTML=this.txtFirst;
			fl.href='#';
			fl.id='pageLink_1';
			fl.onclick=function(e){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__navigate(e); }
			span.appendChild(fl);
			DHTMLSuite.commonObj.__addEventEl(fl);
		}

		var span=document.createElement('SPAN');
		span.innerHTML=this.linkPagePrefix;
		this.pageListDivEl.appendChild(span);
		span.className='DHTMLSuite_pageHandler_previousLink';

		var previousLink=document.createElement('A');
		// "Previous" link
		previousLink.innerHTML=this.txtPrevious;
		previousLink.href='#';
		previousLink.id='previous';
		previousLink.onclick=function(e){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__navigate(e); }
		span.appendChild(previousLink);
		DHTMLSuite.commonObj.__addEventEl(previousLink);
		if(this.activePageNumber==1)previousLink.className='previousLinkDisabled'; else previousLink.className='previousLink';

		var startNumberToShow=1;
		var endNumberToShow=numberOfPages;
		if(this.maximumNumberOfPageLinks&&this.maximumNumberOfPageLinks<numberOfPages){
			startNumberToShow=Math.max(1,Math.round(this.activePageNumber-this.maximumNumberOfPageLinks/2));
			endNumberToShow=Math.min(numberOfPages,startNumberToShow+this.maximumNumberOfPageLinks-1);

			if(endNumberToShow-startNumberToShow < this.maximumNumberOfPageLinks){
			startNumberToShow=Math.max(1,endNumberToShow-this.maximumNumberOfPageLinks+1);
			}
		}
		for(var no=startNumberToShow;no<=endNumberToShow;no++){
			var span=document.createElement('SPAN');
			span.innerHTML=this.linkPagePrefix;
			this.pageListDivEl.appendChild(span);
			var pageLink=document.createElement('A');
			if(no==this.activePageNumber)pageLink.className='DHTMLSuite_tableWidgetPageHandler_activePage'; else pageLink.className='DHTMLSuite_tableWidgetPageHandler_inactivePage';
			pageLink.innerHTML=no;
			pageLink.href= '#';
			pageLink.id='pageLink_'+no;
			pageLink.onclick=function(e){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__navigate(e); }
			DHTMLSuite.commonObj.__addEventEl(pageLink);
			this.pageListDivEl.appendChild(pageLink);

			var span=document.createElement('SPAN');
			span.innerHTML=this.linkPageSuffix;
			this.pageListDivEl.appendChild(span);
		}
		var span=document.createElement('SPAN');
		span.innerHTML=this.linkPagePrefix;
		this.pageListDivEl.appendChild(span);
		span.className='DHTMLSuite_pageHandler_nextLink';

		var nextLink=document.createElement('A');
		// "Next" link
		nextLink.innerHTML=this.txtNext;
		nextLink.id='next';
		nextLink.href='#';
		nextLink.onclick=function(e){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__navigate(e); }
		DHTMLSuite.commonObj.__addEventEl(nextLink);
		span.appendChild(nextLink);
		if(this.activePageNumber==numberOfPages)nextLink.className='nextLinkDisabled'; else nextLink.className='nextLink';

		/* link to Last page */
		if(this.maximumNumberOfPageLinks&&this.maximumNumberOfPageLinks<numberOfPages){
			var span=document.createElement('SPAN');
			span.innerHTML=this.linkPagePrefix;
			this.pageListDivEl.appendChild(span);
			span.className='DHTMLSuite_pageHandler_lastLink';
			var ll=document.createElement('A');
		// "Last" link
			ll.innerHTML=this.txtLast;
			ll.href='#';
			ll.id='pageLink_'+(numberOfPages);
			ll.onclick=function(e){ return DHTMLSuite.variableStorage.arrayDSObjects[ind].__navigate(e); }
			span.appendChild(ll);
			DHTMLSuite.commonObj.__addEventEl(ll);
		}
	}

	// }}}
	,

	// {{{ __navigate()
	 /**
	  *
	 *	Navigate-click on "next" or "previous" link or click on a page
	  *
	  *	@param Event e	= Reference to event object. used to get a reference to the element triggering this action.
	 *
	 *
	 *@private
	  */
	__navigate:function(e){
		if(document.all)e=event;
		var src=DHTMLSuite.commonObj.getSrcElement(e);
		var initActivePageNumber=this.activePageNumber;
		var numberOfPages=Math.ceil(this.totalNumberOfRows/this.rowsPerPage);

		if(src.id.indexOf('pageLink_')>=0){
			var pageNo=src.id.replace(/[^0-9]/gi,'')/1;
			this.activePageNumber=pageNo;

		}
		if(src.id=='next'){
		// next link clicked
			this.activePageNumber++;
			if(this.activePageNumber>numberOfPages)this.activePageNumber=numberOfPages;
		}
		if(src.id=='previous'){
			this.activePageNumber--;
			if(this.activePageNumber<1)this.activePageNumber=1;
		}

		if(this.activePageNumber!=initActivePageNumber){
			this.tableRef.serversideSortCurrentStartIndex=((this.activePageNumber-1)*this.rowsPerPage);
			this.tableRef.__getItemsFromServer(this.callbackOnAfterNavigate);
			this.setHTMLOfResultList();
			this.__createPageLinks();
		}
		return false;

	}

	// }}}
	,

	// {{{ __resetActivePageNumber()
	 /**
	  *
	 *	Reset active page number-called from the tableWidget
	 *
	 *
	 *@private
	  */
	__resetActivePageNumber:function(){
		this.activePageNumber=1;
		this.setHTMLOfResultList();
		this.__createPageLinks();
	}

	// }}}
	,

	// {{{ goToPage()
	 /**
	  *
	 *	Go to a page
	  *	@param Integer pageNumber
	 *
	 *
	 *@public
	  */
	goToPage:function(pageNo){
		var initActivePageNumber=this.activePageNumber;
		this.activePageNumber=pageNo;
		if(this.activePageNumber!=initActivePageNumber){
			this.tableRef.serversideSortCurrentStartIndex=((this.activePageNumber-1)*this.rowsPerPage);
			this.tableRef.__getItemsFromServer(this.callbackOnAfterNavigate);
			this.setHTMLOfResultList();
			this.__createPageLinks();
		}
	}
}

/************************************************************************************************************
*	Table widget class
*
*	Created:		August, 18th, 2006
*	Purpose of class:	Make HTML tables sortable
*			Apply application look to the table
*			Create one object for each HTML table.
*
*	CSS used:		table-widget.css
*	images used:	arrow_up.gif
* 			arrow_down.gif
*
* 	Update log:
*
************************************************************************************************************/

/**
* @constructor
* @class Purpose of class:	Make HTML tables sortable<br><br>
*			Apply application look to the table<br>
*			Create one object for each HTML table.<br>
*<br>
*	Remember to have both &lt;THEAD> and &lt;TBODY> in your table.
* <br>
*	&lt;DIV><br>
*	&lt;table><br>
*	&lt;thead><br>
*		&lt;tr><br>
*		&lt;td>Header cell&lt;/td><br>
*		&lt;td>Header cell&lt;/td><br>
*		&lt;/tr><br>
*	&lt;/thead><br>
*	&lt;tbody><br>
*		&lt;tr><br>
*		&lt;td>Table data&lt;/td><br>
*		&lt;td>Table data&lt;/td><br>
*		&lt;/tr><br>
*		&lt;tr><br>
*		&lt;td>Table data&lt;/td><br>
*		&lt;td>Table data&lt;/td><br>
*		&lt;/tr><br>
*	&lt;/tbody><br>
*	&lt;/table><br>
*	&lt;/div><br>
*	<br><br>
*	Also remember:	If you put a table inside a non-displayed element, example an inactive tab(the tabView script), remember to create
*	and initialize the table objects before you create the tab objects. In some browsers, that's nescessary in order for the table to
*	display properly. <br>
*	(<a href="../../demos/demo-tablewidget.html" target="_blank">demo 1</a>)
*
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
**/

DHTMLSuite.tableWidget=function(){
	var tableWidget_okToSort;
	// Variable indicating if it's ok to sort. This variable is "false" when sorting is in progress
	var activeColumn;
	// Reference to active column, i.e. column currently beeing sorted
	var idOfTable;
	// Id of table, i.e. the <table> tag
	var tableObj;
	// Reference to <table> tag.
	var widthOfTable;
	// Width of table	(Used in the CSS)
	var heightOfTable;
	// Height of table	(Used in the CSS)
	var columnSortArray;
	// Array of how table columns should be sorted
	var layoutCSS;
	// Name of CSS file for the table widget.
	var noCssLayout;
	// true or false, indicating if the table should have layout or not, if not, it would be a plain sortable table.
	var serversideSort;
	// true or false, true if the widget is sorted on the server.
	var serversideSortAscending;
	var tableCurrentlySortedBy;
	var serversideSortFileName;
	// Name of file on server to send request to when table data should be sorted
	var serversideSortNumberOfRows;
	// Number of rows to receive from the server
	var serversideSortCurrentStartIndex;
	// Index of first row in the dataset, i.e. if you move to next page, this value will be incremented
	var serversideSortExtraSearchCriterias;
	// Extra param to send to the server, example: &firstname=Alf&lastname=Kalleland
	var pageHandler;
	// Object of class DHTMLSuite.tableWidgetPageHandler
	var rowClickCallBackFunction;
	// Row click call back function.
	var objectIndex;
	// Index of this object in the DHTMLSuite.variableStorage.arrayDSObjects array

	this.serversideSort=false;
	// Default value for serversideSort(items are sorted in the client)
	this.serversideSortAscending=true;
	// Current sort ( ascending or descending)
	this.tableCurrentlySortedBy=false;
	this.serversideSortFileName=false;
	this.serversideSortCurrentStartIndex=0;
	this.serversideSortExtraSearchCriterias='';
	this.rowClickCallBackFunction=false;
	this.setRowDblClickCallBackFunction=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');
	}

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

 
DHTMLSuite.dragDropSimple = function(propertyArray){
	var divElement;
	var dragTimer;	// -1 no drag, 0-4 = initializing , 5 = drag in process
	var cloneNode;
	this.cloneNode = true;

	var callbackOnAfterDrag;
	var callbackOnBeforeDrag;
	var callbackOnDuringDrag;

	var mouse_x;
	var mouse_y;
	var positionSet;
	var dragHandle;	// If a specific element is specified to be a drag handle.

	var allowMoveX;
	var allowMoveY;
	var maxY;
	var minY;
	var minX;
	var maxX;

	var initialXPos;
	var initialYPos;

	this.positionSet = false;
	this.dragHandle = new Array();
	var initOffsetX;
	var initOffsetY;

	this.allowMoveX = true;
	this.allowMoveY = true;
	this.maxY = false;
	this.maxX = false;
	this.minX = false;
	this.minY = false;

	this.callbackOnAfterDrag = false;
	this.callbackOnBeforeDrag = false;

	this.dragStatus = -1;
	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;
	this.__setInitProps(propertyArray);
	this.__init();
}



DHTMLSuite.dragDrop = function(){
	var mouse_x;					// mouse x position when drag is started
	var mouse_y;					// mouse y position when drag is started.

	var el_x;						// x position of dragable element
	var el_y;						// y position of dragable element

	var dragDropTimer;				// Timer - short delay from mouse down to drag init.
	var numericIdToBeDragged;		// numeric reference to element currently being dragged.
	var dragObjCloneArray;			// Array of cloned dragable elements. every
	var dragDropSourcesArray;		// Array of source elements, i.e. dragable elements.
	var dragDropTargetArray;		// Array of target elements, i.e. elements where items could be dropped.
	var currentZIndex;				// Current z index. incremented on each drag so that currently dragged element is always on top.
	var okToStartDrag;				// Variable which is true or false. It would be false for 1/100 seconds after a drag has been started.
									// This is useful when you have nested dragable elements. It prevents the drag process from staring on
									// parent element when you click on dragable sub element.
	var moveBackBySliding;			// Variable indicating if objects should slide into place moved back to their location without any slide animation.
	var dragX_allowed;				// Possible to drag this element along the x-axis?
	var dragY_allowed;				// Possible to drag this element along the y-axis?

	var currentEl_allowX;
	var currentEl_allowY;
	var drag_minX;
	var drag_maxX;
	var drag_minY;
	var drag_maxY;
	var dragInProgress;				// Variable which is true when drag is in progress, false otherwise

	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.dragX_allowed = true;
	this.dragY_allowed = true;
	this.currentZIndex = 21000;
	this.dragDropTimer = -1;
	this.dragObjCloneArray = new Array();
	this.numericIdToBeDragged = false;

	this.okToStartDrag = true;
	this.moveBackBySliding = true;
	this.dragInProgress = false;

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

}


var refToTabViewObjects=new Array();

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');
	}
}
























/*[FILE_START:dhtmlSuite-paneSplitterModel.js] */
/************************************************************************************************************
*	Data model for a pane splitter
*
*	Created:						November, 28th, 2006
*	@class Purpose of class:		Data source for the pane splitter
*
*	Css files used by this script:
*
*	@param Array arrayOfProperties - pane splitter properties - associative array. possible keys:
*			collapseButtonsInTitleBars - true if you want collapse/expand buttons in the title bar instead of at the middle of the resize handle
*
*	Demos of this class:
*
* 	Update log:
*
************************************************************************************************************/

/**
* @constructor
* @class Purpose of class:	Store metadata about a pane splitter widget
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
*/
DHTMLSuite.paneSplitterModel = function(arrayOfProperties){

	var panes;		// Array of paneSplitterPaneModel objects
	var collapseButtonsInTitleBars;		// Place collapse button inside title bars ?
	this.collapseButtonsInTitleBars = false;

	this.panes = new Array();
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}
	this.__setInitProps(arrayOfProperties);
}

DHTMLSuite.paneSplitterModel.prototype =
{
	// {{{ addPane()
	/**
	*	Add a pane to the paneSplitterModel
	*
	*	@param paneModelRef paneModelRefect of class DHTMLSuite.paneSplitterPaneModel
	*
	*	@public
	*/
	addPane : function(paneModelRef){
		this.panes[this.panes.length] = paneModelRef;
	}
	// }}}
	,
	// {{{ getItems()
	/**
	*	Add a pane to the paneSplitterModel
	*
	*	@return Array of DHTMLSuite.paneSplitterPaneModel objects
	*
	*	@public
	*/
	getItems : function(){
		return this.panes;
	}
	// }}}
	,
	// {{{ __setInitProps()
	/**
	*	Save initial properties
	*
	*	@param Array associative array of properties
	*
	*	@private
	*/
	__setInitProps : function(propArray){
		if(!propArray)return;
		if(propArray.collapseButtonsInTitleBars || propArray.collapseButtonsInTitleBars===false)this.collapseButtonsInTitleBars = propArray.collapseButtonsInTitleBars;
	}
}

/**
* @constructor
* @class Purpose of class:	Store metadata about a pane
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
*/

/************************************************************************************************************
*	Data model for a pane
*
*	Created:						November, 28th, 2006
*	@class Purpose of class:		Data source for the pane splitter
*
*	Css files used by this script:
*
*	Demos of this class:
*
* 	Update log:
*
************************************************************************************************************/
DHTMLSuite.paneSplitterPaneModel = function(inputArray){
	var id;					// Unique id of pane, in case you want to perform operations on this particular pane.
	var position;			// Position, possible values: "West","East","North","South" and "Center"
	var size;				// Current size of pane(for west and east, the size is equal to width, for south and north, size is equal to height)
	var minSize;			// Minimum size(height or width) of the pane
	var maxSize;			// Maximum size(height or width) of the pane.
	var resizable;			// Boolean - true or false, is the pane resizable
	var visible;			// Boolean - true or false, is the pane visible?
	var scrollbars;			// Boolean - true or false, visibility of scrollbars when content size is bigger than visible area(default = true)
	var contents;			// Array of paneSplitterContentModel objects
	var collapsable;		// Boolean - true or false, is this pane collapsable
	var state;				// State of a pane, possible values, "expanded","collapsed"; (default = expanded)
	var callbackOnCollapse;	// Call back function - if ony function name is give, a reference to this model will be passed to the function with that name
	var callbackOnHide;	// Call back function - if ony function name is give, a reference to this model will be passed to the function with that name
	var callbackOnShow;		// Call back function - if ony function name is give, a reference to this model will be passed to the function with that name
	var callbackOnExpand;	// Call back function - if ony function name is give, a reference to this model will be passed to the function with that name
	var callbackOnSlideOut;	// Call back function - if ony function name is give, a reference to this model will be passed to the function with that name
	var callbackOnSlideIn;	// Call back function - if ony function name is give, a reference to this model will be passed to the function with that name
	var callbackOnCloseContent;	// Call back function - if ony function name is give, a reference to this model will be passed to the function with that name
	var callbackOnBeforeCloseContent;	// Call back function - if ony function name is give, a reference to this model will be passed to the function with that name
	var callbackOnTabSwitch;	// Call back function - if ony function name is give, a reference to this model will be passed to the function with that name
	var callbackOnResize;	// Call back function - called whenever a tab has been resized manually by dragging the "handle".

	this.contents = new Array();
	this.scrollbars = true;
	this.resizable = true;
	this.collapsable = true;
	this.state = 'expanded';
	this.visible = true;
	if(inputArray)this.setData(inputArray);

}

DHTMLSuite.paneSplitterPaneModel.prototype =
{
	// {{{ setData()
	/**
	*	One method which makes it possible to set all properties
	*
	*	@param Array inputArray associative array of properties
	*			properties: id,position,title,tabTitle,closable,resizable,size,minSize,maxSize,htmlElementId,contentUrl,collapsable,state(expanded or collapsed),visible
	*						callbackOnCollapse,callbackOnHide,callbackOnShow,callbackOnExpand,callbackOnSlideIn,
	*						callbackOnSlideOut,callbackOnCloseContent,callbackOnBeforeCloseContent,callbackOnTabSwitch,callbackOnResize
	*
	*	@public
	*/
	setData : function(inputArray){
		if(inputArray["collapsable"])inputArray["collapsable"]=eval(inputArray["collapsable"]);
		if(inputArray["id"])this.id = inputArray["id"];
		if(inputArray["position"])this.position = inputArray["position"];
		if(inputArray["resizable"]===false || inputArray["resizable"]===true)this.resizable = inputArray["resizable"];
		if(inputArray["size"])this.size = inputArray["size"];
		if(inputArray["minSize"])this.minSize = inputArray["minSize"];
		if(inputArray["maxSize"])this.maxSize = inputArray["maxSize"];
		if(inputArray["visible"]===false || inputArray["visible"]===true)this.visible = inputArray["visible"];
		if(inputArray["collapsable"]===false || inputArray["collapsable"]===true)this.collapsable = inputArray["collapsable"];
		if(inputArray["scrollbars"]===false || inputArray["scrollbars"]===true)this.scrollbars = inputArray["scrollbars"];
		if(inputArray["state"])this.state = inputArray["state"];
		if(inputArray["callbackOnCollapse"])this.callbackOnCollapse = inputArray["callbackOnCollapse"];
		if(inputArray["callbackOnHide"])this.callbackOnHide = inputArray["callbackOnHide"];
		if(inputArray["callbackOnShow"])this.callbackOnShow = inputArray["callbackOnShow"];
		if(inputArray["callbackOnExpand"])this.callbackOnExpand = inputArray["callbackOnExpand"];
		if(inputArray["callbackOnSlideIn"])this.callbackOnSlideIn = inputArray["callbackOnSlideIn"];
		if(inputArray["callbackOnSlideOut"])this.callbackOnSlideOut = inputArray["callbackOnSlideOut"];
		if(inputArray["callbackOnCloseContent"])this.callbackOnCloseContent = inputArray["callbackOnCloseContent"];
		if(inputArray["callbackOnBeforeCloseContent"])this.callbackOnBeforeCloseContent = inputArray["callbackOnBeforeCloseContent"];
		if(inputArray["callbackOnTabSwitch"])this.callbackOnTabSwitch = inputArray["callbackOnTabSwitch"];
		if(inputArray["callbackOnResize"])this.callbackOnResize = inputArray["callbackOnResize"];

	}
	// }}}
	,
	// {{{ setSize()
	/**
	*	Set size of pane
	*
	*	@param Integer newSizeInPixels = Size of new pane ( for "west" and "east", it would be width, for "north" and "south", it's height.
	*
	*	@public
	*/
	setSize : function(newSizeInPixels){
		this.size = newSizeInPixels;
	}
	// }}}
	,
	// {{{ addContent()
	/**
	*	Add content to a pane.
	*	This method should only be called before the paneSplitter has been initialized, i.e. before it has been displayed on the screen
	*	After it has been displayed, use the addContent method of the DHTMLSuite.paneSplitter class to add content to panes.
	*
	*	@param Object paneSplitterContentObj = An object of class DHTMLSuite.paneSplitterContentModel
	*	@return Boolean Success = true if content were added, false otherwise, i.e. if conten allready exists
	*	@private
	*/
	addContent : function(paneSplitterContentObj){
		// Check if content with this id allready exists. if it does, escape from the function.
		for(var no=0;no<this.contents.length;no++){
			if(this.contents[no].id==paneSplitterContentObj.id)return false;
		}
		this.contents[this.contents.length] = paneSplitterContentObj;	// Add content to the array of content objects.
		return true;
	}
	// }}}
	,
	// {{{ getContents()
	/**
	*	Return an array of content objects
	*
	*	@return Array of DHTMLSuite.paneSplitterContentModel objects
	*
	*	@public
	*/
	getContents : function(){
		return this.contents;
	}
	// }}}
	,
	// {{{ getCountContent()
	/**
	*	Return number of content objects inside this paneModel
	*
	*	@return Integer Number of DHTMLSuite.paneSplitterContentModel objects
	*
	*	@public
	*/
	getCountContent : function(){
		return this.contents.length;
	}
	// }}}
	,
	// {{{ getPosition()
	/**
	*	Return position of this pane
	*
	*	@return String Position of pane ( lowercase, "north","west","east","south" or "center" )
	*
	*	@public
	*/
	getPosition : function(){
		return this.position.toLowerCase();
	}

	,
	// {{{ __setState()
	/**
	*	Update the state attribute
	*
	*	@param String state = state of pane ( "expanded" or "collapsed" )
	*
	*	@private
	*/
	__setState : function(state){
		this.state = state;
	}
	// }}
	,
	// {{{ __getState()
	/**
	*	Update the state attribute
	*
	*	@return String state - state of pane
	*	@private
	*/
	__getState : function(state){
		return this.state;
	}
	,
	// {{{ __deleteContent()
	/**
	*	Delete content from a pane.
	*
	*	@param Integer indexOfContentObjectToDelete - Content index
	*	@return Integer - Index of new active pane.
	*	@private
	*/
	__deleteContent : function(indexOfContentObjectToDelete){
		try{
			this.contents.splice(indexOfContentObjectToDelete,1);
		}catch(e){
		}

		var retVal = indexOfContentObjectToDelete;
		if(this.contents.length>(indexOfContentObjectToDelete-1))retVal--;
		if(retVal<0 && this.contents.length==0)return false;
		if(retVal<0)retVal=0;
		return retVal;
	}
	// }}}
	,
	// {{{ __getIndexById()
	/**
	*	Return index of content with a specific content id
	*
	*	@param String id - id of content
	*	@return Integer index - Index of content
	*	@private
	*/
	__getIndexById : function(id){
		for(var no=0;no<this.contents.length;no++){
			if(this.contents[no].id==id)return no;
		}
		return false;

	}
	// }}}
	,
	// {{{ __setVisible()
	/**
	*	Set pane visibility
	*
	*	@param Boolean visible - true = visible, false = hidden
	*
	*	@private
	*/
	__setVisible : function(visible){
		this.visible = visible;
	}
}

/**
* @constructor
* @class Purpose of class:	Store metadata about the content of a pane
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
*/

/************************************************************************************************************
*	Data source for the content of a pane splitter pane
*
*	Created:						November, 28th, 2006
*	@class Purpose of class:		Data source for the pane splitter pane
*
*	Css files used by this script:
*
*	Demos of this class:
*
* 	Update log:
*
************************************************************************************************************/

DHTMLSuite.paneSplitterContentModel = function(inputArray){
	var id;					// Unique id of pane, in case you want to perform operations on this particular pane.
	var htmlElementId;		// Id of element on the page - if present, the content of this pane will be set to the content of this element
	var title;				// Title of pane
	var tabTitle;			// If more than one pane is present at this position, what's the tab title of this one.
	var closable;			// Boolean - true or false, should it be possible to close this pane
	var contentUrl;			// Url to content - used in case you want the script to fetch content from the server. the path is relative to your html page.
	this.closable = true;	// Default value
	var refreshAfterSeconds;
	var displayRefreshButton;

	this.displayRefreshButton = false;
	this.refreshAfterSeconds = 0;

	if(inputArray)this.setData(inputArray);	// Input array present, call the setData method.
}

DHTMLSuite.paneSplitterContentModel.prototype =
{
	// {{{ setData()
	/**
	*	One method which makes it possible to set all properties
	*
	*	@param Array associative array of properties
	*			properties: id,position,title,tabTitle,closable,htmlElementId,contentUrl,refreshAfterSeconds
	*
	*	@public
	*/
	setData : function(inputArray){
		if(inputArray["id"])this.id = inputArray["id"]; else this.id = inputArray['htmlElementId'];
		if(inputArray["closable"]===false || inputArray["closable"]===true)this.closable = inputArray["closable"];
		if(inputArray["displayRefreshButton"]===false || inputArray["displayRefreshButton"])this.displayRefreshButton = inputArray["displayRefreshButton"];
		if(inputArray["title"])this.title = inputArray["title"];
		if(inputArray["tabTitle"])this.tabTitle = inputArray["tabTitle"];
		if(inputArray["contentUrl"])this.contentUrl = inputArray["contentUrl"];
		if(inputArray["htmlElementId"])this.htmlElementId = inputArray["htmlElementId"];
		if(inputArray["refreshAfterSeconds"])this.refreshAfterSeconds = inputArray["refreshAfterSeconds"];

	}
	// }}}
	,
	// {{{ __setTitle()
	/**
	* 	 Set new title
	*
	*	@param String newTitle - New tab title
	*
	*	@private
	*/
	__setTitle : function(newTitle){
		this.title = newTitle;
	}
	// }}}
	,
	// {{{ __setTabTitle()
	/**
	* 	 Set new tab title
	*
	*	@param String newTabTitle - New tab title
	*
	*	@private
	*/
	__setTabTitle : function(newTabTitle){
		this.tabTitle = newTabTitle;
	}
	// }}}
	,
	// {{{ __setIdOfContentElement()
	/**
	* 	 Specify contentId
	*
	*	@param String htmlElementId - Id of content ( HTML Element on the page )
	*
	*	@private
	*/
	__setIdOfContentElement : function(htmlElementId){
		this.htmlElementId = htmlElementId;
	}
	// }}}
	,
	// {{{ __setRefreshAfterSeconds()
	/**
	* 	 Set reload content value ( seconds )
	*
	*	@param Integer refreshAfterSeconds - Refresh rate in seconds
	*
	*	@private
	*/
	__setRefreshAfterSeconds : function(refreshAfterSeconds){
		this.refreshAfterSeconds = refreshAfterSeconds;
	}
	// }}}
	,
	// {{{ __setContentUrl()
	/**
	* 	 Specifies external url for content
	*
	*	@param String contentUrl - Url of content
	*
	*	@private
	*/
	__setContentUrl : function(contentUrl){
		this.contentUrl = contentUrl;
	}
	/// }}}
	,
	// {{{ __getClosable()
	/**
	*	Return the closable attribute
	*	@private
	*/
	__getClosable : function(){
		return this.closable;
	}
}

/*[FILE_START:dhtmlSuite-paneSplitter.js] */
/************************************************************************************************************
*	DHTML pane splitter pane
*
*	Created:						November, 28th, 2006
*	@class Purpose of class:		Creates a pane for the pane splitter ( This is a private class )
*
*	Css files used by this script:	pane-splitter.css
*
*	Demos of this class:			demo-pane-splitter.html
*
* 	Update log:
*
************************************************************************************************************/
/**
* @constructor
* @class Purpose of class:	Creates the content for a pane in the pane splitter widget( This is a private class )
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
*/

DHTMLSuite.paneSplitterPane = function(parentRef){
	var divElement;		// Reference to a div element for the content
	var divElCollapsed;	// Reference to the div element for the content ( collapsed state )
	var divElCollapsedInner;	// Reference to the div element for the content ( collapsed state )
	var contentDiv;		// Div for the content
	var headerDiv;		// Reference to the header div
	var titleSpan;		// Reference to the <span> tag for the title
	var paneModel;		// An array of paneSplitterPaneView objects
	var resizeDiv;		// Div for the resize handle
	var tabDiv;			// Div for the tabs
	var divTransparentForResize;	// This transparent div is used to cover iframes when resize is in progress.
	var parentRef;		// Reference to paneSplitter object

	var divClose;		// Reference to close button
	var divCollapse;	// Reference to collapse button
	var divExpand;		// Reference to expand button
	var divRefresh;		// Reference to refresh button

	var slideIsInProgress;		// Internal variable used by the script to determine if slide is in progress or not
	var reloadIntervalHandlers;	// Array of setInterval objects, one for each content of this pane

	var contentScrollTopPositions;	// Array of contents scroll top positions in pixels.

	this.contents = new Array();
	this.reloadIntervalHandlers = new Object();
	this.contentScrollTopPositions = new Object();

	this.parentRef = parentRef;
	var activeContentIndex;	// Index of active content(default = 0)
	this.activeContentIndex = false;
	this.slideIsInProgress = false;
	var objectIndex;			// Index of this object in the variableStorage array
	this.objectIndex = DHTMLSuite.variableStorage.arrayDSObjects.length;
	DHTMLSuite.variableStorage.arrayDSObjects[this.objectIndex] = this;
}
DHTMLSuite.paneSplitterPane.prototype =
{
	// {{{ addDataSource()
	/**
	*	Add a data source to the pane
	*
	*	@param paneModelRef - Object of class DHTMLSuite.paneSplitterpaneModelRef
	*	@public
	*/
	addDataSource : function(paneModelRef){
		this.paneModel = paneModelRef;
	}
	// }}}
	,
	// {{{ addContent()
	/**
	* 	 Add a content model to the pane.
	*
	*	@param DHTMLSuite.paneSplitterpaneContentModelObject paneContentModelObject - Object of class DHTMLSuite.paneSplitterpaneContentModelObject
	*	@param String jsCodeToExecuteWhenComplete - JS code to execute/evaluate when content has been successfully loaded.
	*	@return Boolean Success - true if content were added, false otherwise (i.e. content already exists)
	*
	*	@public
	*/
	addContent : function(paneContentModelObject,jsCodeToExecuteWhenComplete){
		var retValue = this.paneModel.addContent(paneContentModelObject);

		if(!retValue)return false;	// Content already exists - return from this method.
		this.__addOneContentDiv(paneContentModelObject,jsCodeToExecuteWhenComplete);
		this.__updateTabContent();
		this.__updateView();
		if(this.paneModel.getCountContent()==1)this.showContent(paneContentModelObject.id);
		return retValue
	}
	// }}}
	,
	// {{{ showContent()
	/**
	* 	Display content - the content with this id will be activated.(if content id doesn't exists, nothing is done)
	*
	*	@param String idOfContentObject - Id of the content to show
	*
	*	@public
	*/
	showContent : function(idOfContentObject){
		for(var no=0;no<this.paneModel.contents.length;no++){
			if(this.paneModel.contents[no].id==idOfContentObject){
				this.__updatePaneView(no);
				return;
			}
		}
	}
	// }}}
	,
	// {{{ loadContent()
	/**
	* 	loads content into a pane
	*
	*	@param String idOfContentObject - Id of the content object - where new content should be appended
	*	@param String url - url to content
	*	@param Integer refreshAfterSeconds		- Reload url after number of seconds. 0 = no refresh ( also default)
	*	@param internalCall Boolean	- Always false ( true only if this method is called by the script it's self )
	*	@param String onCompleteJsCode - Js code to execute when content has been successfully loaded.
	*
	*	@public
	*/
	loadContent : function(idOfContentObject,url,refreshAfterSeconds,internalCall,onCompleteJsCode){
		if(!url)return;
		for(var no=0;no<this.paneModel.contents.length;no++){
			if(this.paneModel.contents[no].id==idOfContentObject){
				if(internalCall && !this.paneModel.contents[no].refreshAfterSeconds)return;	// Refresh rate has been cleared - no reload.
				var ajaxWaitMsg = this.parentRef.waitMessage;	// Please wait message
				this.paneModel.contents[no].__setContentUrl(url);
				if(refreshAfterSeconds && !internalCall){
					this.paneModel.contents[no].__setRefreshAfterSeconds(refreshAfterSeconds);
				}
				if(refreshAfterSeconds)this.__handleContentReload(idOfContentObject,refreshAfterSeconds);
				try{
					var dynContent = new DHTMLSuite.dynamicContent();
				}catch(e){
					alert('You need to include dhtmlSuite-dynamicContent.js');
				}
				dynContent.setWaitMessage(ajaxWaitMsg);
				dynContent.loadContent(this.paneModel.contents[no].htmlElementId,url,onCompleteJsCode);
				dynContent = false;
				return;
			}
		}
	}
	// }}}
	,
	// {{{ isUrlLoadedInPane()
	/**
	* 	Check if url is allready loaded into a pane.
	*
	*	@param String idOfContentObject - Id of content
	*	@param String url - url to check
	*
	*	@public
	*/
	isUrlLoadedInPane : function(idOfContentObject,url){
		var contentIndex = this.paneModel.__getIndexById(idOfContentObject);
		if(contentIndex!==false){
			if(this.paneModel.contents[contentIndex].contentUrl==url)return true;
		}
		return false;

	}
	// }}}
	,
	// {{{ reloadContent()
	/**
	* 	Reloads content for a pane ( AJAX )
	*
	*	@param String idOfContentObject - Id of the content object - where new content should be appended
	*
	*	@public
	*/
	reloadContent : function(idOfContentObject){
		var contentIndex = this.paneModel.__getIndexById(idOfContentObject);
		if(contentIndex!==false){
			this.loadContent(idOfContentObject,this.paneModel.contents[contentIndex].contentUrl);
		}
	}
	// }}}
	,
	// {{{ setRefreshAfterSeconds()
	/**
	* 	Reloads content into a pane - sets a timeout for a new call to loadContent
	*
	*	@param String idOfContentObject - Id of the content object - id of content
	*	@param Integer refreshAfterSeconds - When to reload content, 0 = no reload of content.
	*
	*	@public
	*/
	setRefreshAfterSeconds : function(idOfContentObject,refreshAfterSeconds){
		for(var no=0;no<this.paneModel.contents.length;no++){
			if(this.paneModel.contents[no].id==idOfContentObject){
				if(!this.paneModel.contents[no].refreshAfterSeconds){
					this.loadContent(idOfContentObject,this.paneModel.contents[no].contentUrl,refreshAfterSeconds);
				}
				this.paneModel.contents[no].__setRefreshAfterSeconds(refreshAfterSeconds);
				this.__handleContentReload(idOfContentObject);
			}
		}
	}
	// }}}
	,
	// {{{ setContentTitle()
	/**
	* 	New tab title of content - i.e. the heading
	*
	*	@param String idOfContent - Id of content object
	*	@param String newTitle - New tab title
	*
	*	@public
	*/
	setContentTitle : function(idOfContent, newTitle){
		var contentModelIndex = this.paneModel.__getIndexById(idOfContent);	// Get a reference to the content object
		if(contentModelIndex!==false){
			var contentModelObj = this.paneModel.contents[contentModelIndex];
			contentModelObj.__setTitle(newTitle);
			this.__updateHeaderBar(this.activeContentIndex);
		}
	}
	// }}}
	,
	// {{{ setContentTabTitle()
	/**
	* 	New tab title for a specific tab(the clickable tab)
	*
	*	@param String idOfContent - Id of content object
	*	@param String newTitle - New tab title
	*
	*	@public
	*/
	setContentTabTitle : function(idOfContent, newTitle){
		var contentModelIndex = this.paneModel.__getIndexById(idOfContent);	// Get a reference to the content object
		if(contentModelIndex!==false){
			var contentModelObj = this.paneModel.contents[contentModelIndex];
			contentModelObj.__setTabTitle(newTitle);
			this.__updateTabContent();
		}
	}
	// }}}
	,
	// {{{ hidePane()
	/**
	* 	Hides the pane
	*
	*
	*	@public
	*/
	hidePane : function(){
		this.paneModel.__setVisible(false);	// Update the data source property
		this.expand();
		this.divElement.style.display='none';
		this.__executeCallBack("hide",this.paneModel.contents[this.activeContentIndex]);
	}
	// }}}
	,
	// {{{ showPane()
	/**
	* 	Make a pane visible
	*
	*
	*	@public
	*/
	showPane : function(){
		this.paneModel.__setVisible(true);
		this.divElement.style.display='block';
		this.__executeCallBack("show",this.paneModel.contents[this.activeContentIndex]);
	}
	// }}}
	,
	// {{{ collapse()
	/**
	* 	Collapses a pane
	*
	*
	*	@public
	*/
	collapse : function(){
		this.__collapse();
		if(!this.parentRef.dataModel.collapseButtonsInTitleBars)this.parentRef.__toggleCollapseExpandButton(this.paneModel.getPosition(),'collapse');
	}
	,
	// {{{ expand()
	/**
	* 	Expands a pane
	*
	*
	*	@public
	*/
	expand : function(){
		this.__expand();
		if(!this.parentRef.dataModel.collapseButtonsInTitleBars)this.parentRef.__toggleCollapseExpandButton(this.paneModel.getPosition(),'expand');
	}
	// }}}
	,
	// {{{ getIdOfCurrentlyDisplayedContent()
	/**
	* 	Returns id of the content currently being displayed - active tab.
	*
	*	@return String id of currently displayed content (active tab).
	*
	*	@private
	*/
	getIdOfCurrentlyDisplayedContent : function(){
		return this.paneModel.contents[this.activeContentIndex].id;
	}
	// }}}
	,
	// {{{ getHtmlElIdOfCurrentlyDisplayedContent()
	/**
	* 	Returns id of the HTML element for currently being displayed - active tab.
	*
	*	@return String htmlElementId of currently displayed content (active tab).
	*
	*	@private
	*/
	getHtmlElIdOfCurrentlyDisplayedContent : function(){
		return this.paneModel.contents[this.activeContentIndex].htmlElementId;
	}
	// }}}
	,
	// {{{ __getSizeOfPaneInPixels()
	/**
	*	Returns pane width in pixels
	*	@return Array - associative array with the keys "width" and "height"
	*
	*	@private
	*/
	__getSizeOfPaneInPixels : function(){
		var retArray = new Object();
		retArray.width = this.divElement.offsetWidth;
		retArray.height = this.divElement.offsetHeight;
		return retArray;
	}
	// }}}
	,
	// {{{ __reloadDisplayedContent()
	/**
	*	Reloads the displayed content if it got content url.
	*
	*	@private
	*/
	__reloadDisplayedContent : function(){
		this.reloadContent(this.paneModel.contents[this.activeContentIndex].id);
	}
	,
	// {{{ __getReferenceTomainDivEl()
	/**
	* 	Returns a reference to the main div element for this pane
	*
	*	@param String divElement - Reference to pane div element(top div of pane)
	*
	*	@private
	*/
	__getReferenceTomainDivEl : function(){
		return this.divElement;
	}
	// }}}
	,
	// {{{ __executeResizeCallBack()
	/**
	* 	Execute a resize pane call back - this method is called from the pane splitter
	*
	*	@private
	*/
	__executeResizeCallBack : function(){
		this.__executeCallBack('resize');
	}
	,
	// {{{ __executeCallBack()
	/**
	* 	Execute a call back function
	*
	*	@parem whichCallBackAction - which call back - event.
	*
	*	@private
	*/
	__executeCallBack : function(whichCallBackAction,contentObj){

		var callbackString = false;
		switch(whichCallBackAction){	/* Which call back string */
			case "show":
				if(!this.paneModel.callbackOnShow)return;
				callbackString = this.paneModel.callbackOnShow;
				break;
			case "collapse":
				if(!this.paneModel.callbackOnCollapse)return;
				callbackString = this.paneModel.callbackOnCollapse;
				break;
			case "expand":
				if(!this.paneModel.callbackOnExpand)return;
				callbackString = this.paneModel.callbackOnExpand;
				break;
			case "hide":
				if(!this.paneModel.callbackOnHide)return;
				callbackString = this.paneModel.callbackOnHide;
				break;
			case "slideIn":
				if(!this.paneModel.callbackOnSlideIn)return;
				callbackString = this.paneModel.callbackOnSlideIn;
				break;
			case "slideOut":
				if(!this.paneModel.callbackOnSlideOut)return;
				callbackString = this.paneModel.callbackOnSlideOut;
				break;
			case "closeContent":
				if(!this.paneModel.callbackOnCloseContent)return;
				callbackString = this.paneModel.callbackOnCloseContent;
				break;
			case "beforeCloseContent":
				if(!this.paneModel.callbackOnBeforeCloseContent)return true;
				callbackString = this.paneModel.callbackOnBeforeCloseContent;
				break;
			case "tabSwitch":
				if(!this.paneModel.callbackOnTabSwitch)return;
				callbackString = this.paneModel.callbackOnTabSwitch;
				break;
			case "resize":
				if(!this.paneModel.callbackOnResize)return;
				callbackString = this.paneModel.callbackOnResize;
				break;
		}
		if(!callbackString)return;
		if(!contentObj)contentObj=false;
		callbackString = this.__getCallBackString(callbackString,whichCallBackAction,contentObj);
		return this.__executeCallBackString(callbackString,contentObj);
	}
	// }}}
	,
	// {{{ __getCallBackString()
	/**
	* 	Parse a call back string. If parantheses are present, return it as it is, otherwise return  the name of the function and the paneModel as argument to that function
	*
	*	@param String callbackString - Call back string to parse
	*	@param String whichCallBackAction - Which callback action
	*	@param Object contentObj - Reference to pane content object(model)
	*
	*	@private
	*/
	__getCallBackString : function(callbackString,whichCallBackAction,contentObj){
		if(callbackString.indexOf('(')>=0)return callbackString;
		if(contentObj){
			callbackString = callbackString + '(this.paneModel,"' + whichCallBackAction + '",contentObj)';
		}else{
			callbackString = callbackString + '(this.paneModel,"' + whichCallBackAction + '")';
		}
		callbackString = callbackString;
		return callbackString;
	}
	// }}}
	,
	// {{{ __executeCallBackString()
	/**
	* 	Reloads content into a pane - sets a timeout for a new call to loadContent
	*
	*	@param String callbackString - Call back string to execute
	*	@param Object contentObj - Reference to pane content object(model)
	*
	*	@private
	*/
	__executeCallBackString : function(callbackString,contentObj){
		try{
			return eval(callbackString);
		}catch(e){
			alert('Could not execute specified call back function:\n' + callbackString + '\n\nError:\n' + e.name + '\n' + e.message + '\n' + '\nMake sure that there aren\'t any errors in your function.\nAlso remember that contentObj would not be present when you click close on the last tab\n(In case a close tab event triggered this callback function)');
		}
	}
	,
	// {{{ __handleContentReload()
	/**
	* 	Reloads content into a pane - sets a timeout for a new call to loadContent
	*
	*	@param String id - Id of the content object - id of content
	*
	*	@private
	*/
	__handleContentReload : function(id){
		var ind = this.objectIndex;
		var contentIndex = this.paneModel.__getIndexById(id);
		if(contentIndex!==false){
			var contentRef = this.paneModel.contents[contentIndex];
			if(contentRef.refreshAfterSeconds){
				if(this.reloadIntervalHandlers[id])clearInterval(this.reloadIntervalHandlers[id]);
				this.reloadIntervalHandlers[id] = setInterval('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].loadContent("' + id + '","' + contentRef.contentUrl + '",' + contentRef.refreshAfterSeconds + ',true)',(contentRef.refreshAfterSeconds*1000));
			}else{
				if(this.reloadIntervalHandlers[id])clearInterval(this.reloadIntervalHandlers[id]);
			}
		}
	}
	// }}}
	,
	// {{{ __createPane()
	/**
	*	This method creates the div for a pane
	*
	*
	*	@private
	*/
	__createPane : function(){
		this.divElement = document.createElement('DIV');	// Create the div for a pane.
		this.divElement.style.position = 'absolute';
		this.divElement.className = 'DHTMLSuite_pane';
		this.divElement.id = 'DHTMLSuite_pane_' + this.paneModel.getPosition();
		document.body.appendChild(this.divElement);
		this.__createHeaderBar();	// Create the header
		this.__createContentPane();	// Create content pane.
		this.__createTabBar();	// Create content pane.
		this.__createCollapsedPane();	// Create div element ( collapsed state)
		this.__createTransparentDivForResize();	// Create transparent div for the resize;
		this.__updateView();	// Update the view
		this.__addContentDivs();
		this.__setSize();
	}
	// }}}
	,
	// {{{ __createTransparentDivForResize()
	/**
	*	Create div element used when content is being resized
	*
	*
	*	@private
	*/
	__createTransparentDivForResize : function(){
		this.divTransparentForResize = document.createElement('DIV');
		var ref = this.divTransparentForResize;
		ref.style.opacity = '0';
		ref.style.display='none';
		ref.style.filter = 'alpha(opacity=0)';
		ref.style.position = 'absolute';
		ref.style.left = '0px';
		ref.style.top = this.headerDiv.offsetHeight + 'px';
		ref.style.height = '90%';
		ref.style.width = '100%';
		ref.style.backgroundColor='#FFF';
		ref.style.zIndex = '1000';
		this.divElement.appendChild(ref);

	}
	// }}}
	,
	// {{{ __createCollapsedPane()
	/**
	*	Creates the div element - collapsed state
	*
	*
	*	@private
	*/
	__createCollapsedPane : function(){
		var ind = this.objectIndex;
		var pos = this.paneModel.getPosition();
		var buttonSuffix = 'Vertical';	// Suffix to the class names for the collapse and expand buttons
		if(pos=='west' || pos=='east')buttonSuffix = 'Horizontal';
		if(pos=='center')buttonSuffix = '';

		this.divElCollapsed = document.createElement('DIV');

		var obj = this.divElCollapsed;

		obj.className = 'DHTMLSuite_pane_collapsed_' + pos;
		obj.style.visibility='hidden';
		obj.style.position = 'absolute';

		this.divElCollapsedInner = document.createElement('DIV');
		this.divElCollapsedInner.className= 'DHTMLSuite_pane_collapsedInner';
		this.divElCollapsedInner.onmouseover = this.__mouseoverHeaderButton;
		this.divElCollapsedInner.onmouseout = this.__mouseoutHeaderButton;
		this.divElCollapsedInner.onclick = function(e){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__slidePane(e); }
		DHTMLSuite.commonObj.__addEventEl(this.divElCollapsedInner);

		obj.appendChild(this.divElCollapsedInner);

		var buttonDiv = document.createElement('DIV');
		buttonDiv.className='buttonDiv';

		this.divElCollapsedInner.appendChild(buttonDiv);

		document.body.appendChild(obj);

		if(this.parentRef.dataModel.collapseButtonsInTitleBars){
			if(this.paneModel.getPosition()=='east' || this.paneModel.getPosition()=='west'){
				this.divElCollapsedInner.style.width = (this.parentRef.paneSizeCollapsed - 6) + 'px';
				this.divElCollapsed.style.width = (this.parentRef.paneSizeCollapsed) + 'px';
				if(this.paneModel.getPosition()=='east'){
					this.divElCollapsedInner.style.marginLeft = '3px';
				}
			}else{
				this.divElCollapsedInner.style.height = (this.parentRef.paneSizeCollapsed - 6) + 'px';
				this.divElCollapsed.style.height = (this.parentRef.paneSizeCollapsed) + 'px';
				buttonDiv.style.cssText = 'float:right;clear:both';
			}
			var pos = this.paneModel.getPosition();
			// Creating expand button
			this.divExpand = document.createElement('DIV');
			if(pos=='south' || pos=='east')
				this.divExpand.className='collapseButton' + buttonSuffix;
			else
				this.divExpand.className='expandButton' + buttonSuffix;

			this.divExpand.onclick = function() { return DHTMLSuite.variableStorage.arrayDSObjects[ind].__expand(); } ;
			this.divExpand.onmouseover = this.__mouseoverHeaderButton;
			this.divExpand.onmouseout = this.__mouseoutHeaderButton;
			DHTMLSuite.commonObj.__addEventEl(this.divExpand);
			buttonDiv.appendChild(this.divExpand);
		}
	}
	// }}}
	,
	// {{{ __autoSlideInPane()
	/**
	*	Automatically slide in a pane when click outside of the pane. This will happen if the pane is currently in "slide out" mode.
	*
	*
	*	@private
	*/
	__autoSlideInPane : function(e){
		if(document.all)e = event;
		var state = this.paneModel.__getState();	// Get state of pane
		if(state=='collapsed' && this.divElement.style.visibility!='hidden'){	// Element is collapsed but showing(i.e. temporary expanded)
			if(!DHTMLSuite.commonObj.isObjectClicked(this.divElement,e))this.__slidePane(e,true);	// Slide in pane if element clicked is not the expanded pane
		}
	}
	// }}}
	,
	// {{{ __slidePane()
	/**
	*	The purpose of this method is to slide out a pane, but the state of the pane is still collapsed
	*
	*	@param Event e - Reference to event object
	*	@param Boolean forceSlide - force the slide action no matter which element the user clicked on.
	*
	*	@private
	*/
	__slidePane : function(e,forceSlide){
		if(this.slideIsInProgress)return;
		this.parentRef.paneZIndexCounter++;
		if(document.all)e = event;	// IE
		var src = DHTMLSuite.commonObj.getSrcElement(e);	// Get a reference to the element triggering the event
		if(src.className=='buttonDiv')src = src.parentNode;
		if(src.className.indexOf('collapsed')<0 && !forceSlide)return;	// If a button on the collapsed pane triggered the event->Return from the method without doing anything.

		this.slideIsInProgress = true;
		var state = this.paneModel.__getState();	// Get state of pane.

		var hideWhenComplete = true;
		if(this.divElement.style.visibility=='hidden'){	// The pane is currently not visible, i.e. not slided out.
			this.__executeCallBack('slideOut',this.paneModel.contents[this.activeContentIndex]);
			this.__setSlideInitPosition();
			this.divElement.style.visibility='visible';
			this.divElement.style.zIndex = 16000 + this.parentRef.paneZIndexCounter;
			this.divElCollapsed.style.zIndex = 16000 + this.parentRef.paneZIndexCounter;

			var slideTo = this.__getSlideToCoordinates(true);	// Get coordinate, where to slide to
			hideWhenComplete = false;
			var slideSpeed = this.__getSlideSpeed(true);

		}else{
			this.__executeCallBack('slideIn',this.paneModel.contents[this.activeContentIndex]);
			var slideTo = this.__getSlideToCoordinates(false);	// Get coordinate, where to slide to
			var slideSpeed = this.__getSlideSpeed(false);
		}

		this.__processSlideByPixels(slideTo,slideSpeed*this.parentRef.slideSpeed,this.__getCurrentCoordinateInPixels(),hideWhenComplete);

	}
	// }}}
	,
	// {{{ __setSlideInitPosition()
	/**
	*	Set position of pane before slide.
	*
	*
	*	@private
	*/
	__setSlideInitPosition : function(){
		var bw = DHTMLSuite.clientInfoObj.getBrowserWidth();
		var bh = DHTMLSuite.clientInfoObj.getBrowserHeight();
		var pos = this.paneModel.getPosition();
		switch(pos){
			case "west":
				this.divElement.style.left = (0 - this.paneModel.size)+ 'px';
				break;
			case "east":
				this.divElement.style.left = bw + 'px';
				break;
			case "north":
				this.divElement.style.top = (0 - this.paneModel.size)+ 'px';
				break;
			case "south":
				this.divElement.style.top = bh + 'px';
				break;
		}
	}
	// }}}
	,
	// {{{ __getCurrentCoordinateInPixels()
	/**
	*	Return pixel coordinates for this pane. For left and east, it would be the left position. For top and south, it would be the top position.
	*
	*	@return Integer currentCoordinate	= Current coordinate for a pane ( top or left)
	*
	*	@private
	*/
	__getCurrentCoordinateInPixels : function(){
		var pos = this.paneModel.getPosition();
		var left = this.divElement.style.left.replace('px','')/1;
		var top = this.divElement.style.top.replace('px','')/1;
		switch(pos){
			case "west": return left;
			case "east": return left;
			case "south": return top;
			case "north": return top;
		}
	}
	// }}}
	,
	// {{{ __getSlideSpeed()
	/**
	*	Return pixel steps for the slide.
	*
	*	@param Boolean slideOut	= true if the element should slide out, false if it should slide back, i.e. be hidden.
	*
	*	@private
	*/
	__getSlideSpeed : function(slideOut){
		var pos = this.paneModel.getPosition();
		switch(pos){
			case "west":
			case "north":
				if(slideOut)return 1;else return -1;
				break;
			case "south":
			case "east":
				if(slideOut)return -1;else return 1;
		}
	}

	// }}}
	,
	// {{{ __processSlideByPixels()
	/**
	*	Slides in our out a pane - this method creates that animation
	*
	*	@param Integer slideTo	- coordinate where to slide to(top or left)
	*	@param Integer slidePixels	- pixels to slide in each iteration of this method
	*	@param Integer currentPos	- current slide position
	*	@param Boolean hideWhenComplete	- Hide pane when completed ?
	*
	*	@private
	*/
	__processSlideByPixels : function(slideTo,slidePixels,currentPos,hideWhenComplete){
		var pos = this.paneModel.getPosition();
		currentPos = currentPos + slidePixels;
		var repeatSlide = true;	// Repeat one more time ?
		if(slidePixels>0 && currentPos>slideTo){
			currentPos = slideTo;
			repeatSlide = false;
		}
		if(slidePixels<0 && currentPos<slideTo){
			currentPos = slideTo;
			repeatSlide = false;
		}
		switch(pos){
			case "west":
			case "east":
				this.divElement.style.left = currentPos + 'px';
				break;
			case "north":
			case "south":
				this.divElement.style.top = currentPos + 'px';
		}

		if(repeatSlide){
			var ind = this.objectIndex;
			setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__processSlideByPixels(' + slideTo + ',' + slidePixels + ',' + currentPos + ',' + hideWhenComplete + ')',10);
		}else{
			if(hideWhenComplete){
				this.divElement.style.visibility='hidden';
				this.divElement.style.zIndex = 11000;
				this.divElCollapsed.style.zIndex = 12000;
			}
			this.slideIsInProgress = false;
		}
	}
	// }}}
	,
	// {{{ __getSlideToCoordinates()
	/**
	*	Return target coordinate for the slide, i.e. where to slide to
	*
	*	@param Boolean slideOut	= true if the element should slide out, false if it should slide back, i.e. be hidden.
	*
	*	@private
	*/
	__getSlideToCoordinates : function(slideOut){
		var bw = DHTMLSuite.clientInfoObj.getBrowserWidth();
		var bh = DHTMLSuite.clientInfoObj.getBrowserHeight();
		var pos = this.paneModel.getPosition();

		switch(pos){
			case "west":
				if(slideOut)
					return this.parentRef.paneSizeCollapsed + this.parentRef.verticalSplitterSize;	// End position is
				else
					return (0 - this.paneModel.size);
			case "east":
				if(slideOut)
					return bw - this.parentRef.paneSizeCollapsed - this.paneModel.size - this.parentRef.verticalSplitterSize -1;
				else
					return bw;
			case "north":
				if(slideOut)
					return this.parentRef.paneSizeCollapsed + this.parentRef.horizontalSplitterSize;	// End position is
				else
					return (0 - this.paneModel.size);
			case "south":
				if(slideOut)
					return bh - this.parentRef.paneSizeCollapsed  - this.paneModel.size - this.parentRef.horizontalSplitterSize -1;
				else
					return bh;
		}

	}

	// }}}
	,
	// {{{ __updateCollapsedSize()
	/**
	*	Automatically figure out the size of the pane when it's collapsed(the height or width of the small bar)
	*
	*
	*	@private
	*/
	__updateCollapsedSize : function(){
		var pos = this.paneModel.getPosition();
		var size;
		if(pos=='west' || pos=='east')size = this.divElCollapsed.offsetWidth;
		if(pos=='north' || pos=='south')size = this.divElCollapsed.offsetHeight;
		if(size)this.parentRef.__setPaneSizeCollapsed(size);
	}
	// }}}
	,
	// {{{ __createHeaderBar()
	/**
	*	Creates the header bar for a pane
	*
	*
	*	@private
	*/
	__createHeaderBar : function(){
		var ind = this.objectIndex;	// Making it into a primitive variable
		var pos = this.paneModel.getPosition();	// Get position of this pane
		var buttonSuffix = 'Vertical';	// Suffix to the class names for the collapse and expand buttons
		if(pos=='west' || pos=='east')buttonSuffix = 'Horizontal';
		if(pos=='center')buttonSuffix = '';

		this.headerDiv = document.createElement('DIV');
		this.headerDiv.className = 'DHTMLSuite_paneHeader';
		this.headerDiv.style.position = 'relative';
		this.divElement.appendChild(this.headerDiv);

		this.titleSpan = document.createElement('SPAN');
		this.titleSpan.className = 'paneTitle';
		this.headerDiv.appendChild(this.titleSpan);

		var buttonDiv = document.createElement('DIV');
		buttonDiv.style.position = 'absolute';
		buttonDiv.style.right = '0px';
		buttonDiv.style.top = '0px';
		buttonDiv.style.width='50px';
		buttonDiv.className = 'DHTMLSuite_paneHeader_buttonDiv';
		this.headerDiv.appendChild(buttonDiv);

		// Creating close button
		this.divClose = document.createElement('DIV');
		this.divClose.className = 'closeButton';
		this.divClose.onmouseover = this.__mouseoverHeaderButton;
		this.divClose.onmouseout = this.__mouseoutHeaderButton;
		this.divClose.innerHTML = '<span></span>';
		this.divClose.onclick = function() { return DHTMLSuite.variableStorage.arrayDSObjects[ind].__close(); } ;
		DHTMLSuite.commonObj.__addEventEl(this.divClose);
		buttonDiv.appendChild(this.divClose);

		// Creating collapse button
		if(pos!='center' && this.parentRef.dataModel.collapseButtonsInTitleBars){
			this.divCollapse = document.createElement('DIV');
			if(pos=='south' || pos=='east')
				this.divCollapse.className='expandButton' + buttonSuffix;
			else
				this.divCollapse.className='collapseButton' + buttonSuffix;
			this.divCollapse.innerHTML = '<span></span>';
			this.divCollapse.onclick = function() { return DHTMLSuite.variableStorage.arrayDSObjects[ind].__collapse(); } ;
			this.divCollapse.onmouseover = this.__mouseoverHeaderButton;
			this.divCollapse.onmouseout = this.__mouseoutHeaderButton;
			DHTMLSuite.commonObj.__addEventEl(this.divCollapse);
			buttonDiv.appendChild(this.divCollapse);
		}

		// Creating refresh button
		this.divRefresh = document.createElement('DIV');
		this.divRefresh.className='refreshButton';
		this.divRefresh.onmouseover = this.__mouseoverHeaderButton;
		this.divRefresh.onmouseout = this.__mouseoutHeaderButton;
		this.divRefresh.onclick = function() { return DHTMLSuite.variableStorage.arrayDSObjects[ind].__reloadDisplayedContent(); } ;
		DHTMLSuite.commonObj.__addEventEl(this.divRefresh);
		buttonDiv.appendChild(this.divRefresh);

		this.headerDiv.onselectstart = function(){ return false; };

	}
	// }}}
	,
	// {{{ __mouseoverHeaderButton()
	/**
	*	Mouse over effect - buttons
	*
	*
	*	@private
	*/
	__mouseoverHeaderButton : function(){
		if(this.className.indexOf('Over')==-1)this.className=this.className + 'Over';
	}
	// }}}
	,
	// {{{ __mouseoutHeaderButton()
	/**
	*	Mouse out effect - buttons
	*
	*
	*	@private
	*/
	__mouseoutHeaderButton : function(){
		this.className=this.className.replace('Over','');
	}
	,
	// {{{ __close()
	/**
	*	Close a pane
	*
	*	@param Event e = Reference to Event object
	*
	*	@private
	*/
	__close : function(e){
		// Check to see if there's an callbackOnBeforeCloseContent event
		var id = this.paneModel.contents[this.activeContentIndex].id;
		var ok = this.__getOnBeforeCloseResult(this.activeContentIndex);
		if(!ok)return;

		if(id){
			this.__executeCallBack('closeContent',this.paneModel.contents[this.activeContentIndex]);
			DHTMLSuite.discardElement(this.paneModel.contents[this.activeContentIndex].htmlElementId);
		}
		this.activeContentIndex = this.paneModel.__deleteContent(this.activeContentIndex);
		if(this.activeContentIndex||this.activeContentIndex==0){
			this.__executeCallBack('tabSwitch',this.paneModel.contents[this.activeContentIndex]);
		}
		this.__updatePaneView(this.activeContentIndex);

	}
	// }}}
	,
	// {{{ __closeAllClosableTabs()
	/**
	*	Close all closable tabs.
	*
	*
	*	@private
	*/
	__closeAllClosableTabs : function(){
		for(var no=0;no<this.paneModel.contents.length;no++){
			var closable = this.paneModel.contents[no].__getClosable();
			if(closable){
				var id = this.paneModel.contents[no].id;
				DHTMLSuite.discardElement(this.paneModel.contents[no].htmlElementId);
				this.activeContentIndex = this.paneModel.__deleteContent(no);
				this.__updatePaneView(this.activeContentIndex);
				no--;
			}
		}
	}
	// }}}
	,
	// {{{ __getOnBeforeCloseResult()
	/**
	*	Return result of onBeforeClose callback
	*
	*	@param Integer contentIndex - Index of content to close.
	*
	*	@private
	*/
	__getOnBeforeCloseResult : function(contentIndex){
		return this.__executeCallBack('beforeCloseContent',this.paneModel.contents[contentIndex]);

	}
	// }}}
	,
	// {{{ __deleteContentByIndex()
	/**
	*	Close a pane
	*
	*	@param Integer index of content to delete
	*
	*	@private
	*/
	__deleteContentByIndex : function(contentIndex){
		if(this.paneModel.getCountContent()==0)return;	// No content to delete
		if(!this.__getOnBeforeCloseResult(contentIndex))return;

		var htmlId = this.paneModel.contents[contentIndex].htmlElementId;
		if(htmlId){
			try{
				DHTMLSuite.discardElement(htmlId);
			}catch(e){
			}
		}

		var tmpIndex = this.paneModel.__deleteContent(contentIndex);
		if(contentIndex==this.activeContentIndex)this.activeContentIndex = tmpIndex;
		if(this.activeContentIndex > contentIndex)this.activeContentIndex--;
		if(tmpIndex===false)this.activeContentIndex=false;

		this.__updatePaneView(this.activeContentIndex);

	}
	// }}}
	,
	// {{{ __deleteContentById()
	/**
	*	Close/Delete content
	*
	*	@param String id = Id of content to delete/close
	*
	*	@private
	*/
	__deleteContentById : function(id){
		var index = this.paneModel.__getIndexById(id);
		if(index!==false)this.__deleteContentByIndex(index);
	}
	// }}}
	,
	// {{{ __collapse()
	/**
	*	Collapse a pane.
	*
	*
	*	@private
	*/
	__collapse : function(){
		this.__updateCollapsedSize();
		this.paneModel.__setState('collapsed');		// Updating the state property
		this.divElCollapsed.style.visibility='visible';
		this.divElement.style.visibility='hidden';
		this.__updateView();
		this.parentRef.__hideResizeHandle(this.paneModel.getPosition());
		this.parentRef.__positionPanes();	// Calling the positionPanes method of parent object
		this.__executeCallBack("collapse",this.paneModel.contents[this.activeContentIndex]);
	}
	,
	// {{{ __expand()
	/**
	*	Expand a pane
	*
	*
	*	@private
	*/
	__expand : function(){
		this.paneModel.__setState('expanded');		// Updating the state property
		this.divElCollapsed.style.visibility='hidden';
		this.divElement.style.visibility='visible';
		this.__updateView();
		this.parentRef.__showResizeHandle(this.paneModel.getPosition());
		this.parentRef.__positionPanes();	// Calling the positionPanes method of parent object
		this.__executeCallBack("expand",this.paneModel.contents[this.activeContentIndex]);
	}
	// }}}
	,
	// {{{ __updateHeaderBar()
	/**
	*	This method will automatically update the buttons in the header bare depending on the setings specified for currently displayed content.
	*
	*	@param Integer index - Index of currently displayed content
	*
	*	@private
	*/
	__updateHeaderBar : function(index){
		if(index===false){	// No content in this pane
			this.divClose.style.display='none';	// Hide close button
			this.divRefresh.style.display='none';
			try{
				if(this.paneModel.getPosition()!='center' && this.paneModel.collapsable)this.divCollapse.style.display='block';else this.divCollapse.style.display='none';	// Make collapse button visible for all panes except center
			}catch(e){
			}
			this.titleSpan.innerHTML = '';	// Set title bar empty
			return;	// Return from this method.
		}
		this.divClose.style.display='block';
		this.divRefresh.style.display='block';

		if(this.divCollapse)this.divCollapse.style.display='block';	// Center panes doesn't have collapse button, that's the reason for the if-statement
		this.titleSpan.innerHTML = this.paneModel.contents[index].title;
		var contentObj = this.paneModel.contents[index];
		if(!contentObj.closable)this.divClose.style.display='none';
		if(!contentObj.displayRefreshButton || !contentObj.contentUrl)this.divRefresh.style.display='none';
		if(!this.paneModel.collapsable){	// Pane is collapsable
			if(this.divCollapse)this.divCollapse.style.display='none';	// Center panes doesn't have collapse button, that's the reason for the if-statement
		}

	}
	// }}}
	,
	// {{{ __showButtons()
	/**
	*	Show the close and resize button - it is done by showing the parent element of these buttons
	*
	*
	*	@private
	*/
	__showButtons : function(){
		var div = this.headerDiv.getElementsByTagName('DIV')[0];
		div.style.visibility='visible';

	}
	// }}}
	,
	// {{{ __hideButtons()
	/**
	*	Hides the close and resize button - it is done by hiding the parent element of these buttons
	*
	*
	*	@private
	*/
	__hideButtons : function(){
		var div = this.headerDiv.getElementsByTagName('DIV')[0];
		div.style.visibility='hidden';

	}
	// }}}
	,
	// {{{ __updateView()
	/**
	* 	Hide or shows header div and tab div based on content
	*
	*
	*	@private
	*/
	__updateView : function(){
		if(this.paneModel.getCountContent()>0 && this.activeContentIndex===false)this.activeContentIndex = 0;	// No content existed, but content has been added.
		this.tabDiv.style.display='block';
		this.headerDiv.style.display='block';

		var pos = this.paneModel.getPosition();
		if(pos=='south' || pos=='north')this.divElCollapsed.style.height = this.parentRef.paneSizeCollapsed;

		if(this.paneModel.getCountContent()<2)this.tabDiv.style.display='none';
		if(this.activeContentIndex!==false)if(!this.paneModel.contents[this.activeContentIndex].title)this.headerDiv.style.display='none';	// Active content without title, hide header bar.

		if(this.paneModel.state=='expanded')this.__showButtons();else this.__hideButtons();

		this.__setSize();
	}
	// }}}
	,
	// {{{ __createContentPane()
	/**
	* 	Creates the content pane
	*
	*
	*	@private
	*/
	__createContentPane : function(){
		this.contentDiv = document.createElement('DIV');
		this.contentDiv.className = 'DHTMLSuite_paneContent';
		this.contentDiv.id = 'DHTMLSuite_paneContent' + this.paneModel.getPosition();
		if(!this.paneModel.scrollbars)this.contentDiv.style.overflow='hidden';
		this.divElement.appendChild(this.contentDiv);

	}
	// }}}
	,
	// {{{ __createTabBar()
	/**
	* 	Creates the top bar of a pane
	*
	*
	*	@private
	*/
	__createTabBar : function(){
		this.tabDiv = document.createElement('DIV');
		this.tabDiv.className = 'DHTMLSuite_paneTabs';
		this.divElement.appendChild(this.tabDiv);
		this.__updateTabContent();
	}
	// }}}
	,
	// {{{ __updateTabContent()
	/**
	* 	Reset and repaint the tabs of this pane
	*
	*
	*	@private
	*/
	__updateTabContent : function(){
		this.tabDiv.innerHTML = '';
		var tableObj = document.createElement('TABLE');

		tableObj.style.padding = '0px';
		tableObj.style.margin = '0px';
		tableObj.cellPadding = 0;
		tableObj.cellSpacing = 0;
		this.tabDiv.appendChild(tableObj);
		var tbody = document.createElement('TBODY');
		tableObj.appendChild(tbody);

		var row = tbody.insertRow(0);

		var contents = this.paneModel.getContents();
		var ind = this.objectIndex;
		for(var no=0;no<contents.length;no++){
			var cell = row.insertCell(-1);
			var divTag = document.createElement('DIV');
			divTag.className = 'paneSplitterInactiveTab';
			cell.appendChild(divTag);
			var aTag = document.createElement('A');
			aTag.title = contents[no].tabTitle;	// Setting title of tab - useful when the tab isn't wide enough to show the label.
			contents[no].tabTitle = contents[no].tabTitle + '';
			aTag.innerHTML = contents[no].tabTitle.replace(' ','&nbsp;') + '';
			aTag.id = 'paneTabLink' + no;
			aTag.href='#';
			aTag.onclick = function(e) { return DHTMLSuite.variableStorage.arrayDSObjects[ind].__tabClick(e); } ;
			divTag.appendChild(aTag);
			DHTMLSuite.commonObj.__addEventEl(aTag);
			divTag.appendChild(document.createElement('SPAN'));
		}
		this.__updateTabView(0);
	}
	// }}}
	,
	// {{{ __updateTabView()
	/**
	* 	 Updates the tab view. Sets inactive and active tabs.
	*
	*	@param Integer activeTab - Index of active tab.
	*
	*	@private
	*/
	__updateTabView : function(activeTab){
		var tabDivs = this.tabDiv.getElementsByTagName('DIV');
		for(var no=0;no<tabDivs.length;no++){
			if(no==activeTab){
				tabDivs[no].className = 'paneSplitterActiveTab';
			}else tabDivs[no].className = 'paneSplitterInactiveTab';
		}
	}
	// }}}
	,
	// {{{ __tabClick()
	/**
	* 	 Click on a tab
	*
	*	@param Event e - Reference to the object triggering the event. Content index is the numeric part of this elements id.
	*
	*	@private
	*/
	__tabClick : function(e){
		// contentScrollTopPositions
		if(document.all)e = event;

		var inputObj = DHTMLSuite.commonObj.getSrcElement(e);
		if(inputObj.tagName!='A')inputObj = inputObj.parentNode;

		var numIdClickedTab = inputObj.id.replace(/[^0-9]/gi,'');
		if(numIdClickedTab!=this.activeContentIndex)this.__updatePaneContentScrollTopPosition(this.activeContentIndex,numIdClickedTab);
		this.__updatePaneView(numIdClickedTab);
		this.__executeCallBack("tabSwitch",this.paneModel.contents[this.activeContentIndex]);
		return false;
	}
	// }}}
	,
	// {{{ __updatePaneContentScrollTopPosition()
	/**
	* 	Changes the scrollTop position of the pane. This is useful when you move from tab to tab. This object remembers the scrollTop position of all it's tab and changes the
	*	scrollTop attribute
	*
	*	@param String idOfContentToHide of content element to hide
	*	@param String idOfContentToShow of content element to show
	*
	*	@private
	*/
	__updatePaneContentScrollTopPosition : function(idOfContentToHide,idOfContentToShow){
		var newScrollTop = 0;
		if(this.contentScrollTopPositions[idOfContentToShow])newScrollTop = this.contentScrollTopPositions[idOfContentToShow];
		var contentParentContainer = document.getElementById(this.paneModel.contents[idOfContentToHide].htmlElementId).parentNode;
		this.contentScrollTopPositions[idOfContentToHide] = contentParentContainer.scrollTop;
		setTimeout('document.getElementById("' + contentParentContainer.id + '").scrollTop = ' + newScrollTop,20);	// A small delay so that content can be inserted into the div first.
	}
	// }}}
	,
	// {{{ __addContentDivs()
	/**
	* 	Add content div to a pane.
	*
	*	@param String onCompleteJsCode - Js code to execute when content has been succesfully loaded into the pane
	*
	*	@private
	*/
	__addContentDivs : function(onCompleteJsCode){
		var contents = this.paneModel.getContents();
		for(var no=0;no<contents.length;no++){
			this.__addOneContentDiv(this.paneModel.contents[no],onCompleteJsCode);
		}
		this.__updatePaneView(this.activeContentIndex);	// Display initial data
	}
	,
	// {{{ __addSingleContentToPane()
	/**
	*
	*
	*	@param Object contentObj PaneSplitterContentModel object.
	*
	*	@private
	*/
	__addOneContentDiv : function(contentObj,onCompleteJsCode){
		var htmlElementId = contentObj.htmlElementId;	// Get a reference to content id
		var contentUrl = contentObj.contentUrl;	// Get a reference to content id
		var refreshAfterSeconds = contentObj.refreshAfterSeconds;	// Get a reference to content id
		if(htmlElementId){
			try{
				this.contentDiv.appendChild(document.getElementById(htmlElementId));
				document.getElementById(htmlElementId).className = 'DHTMLSuite_paneContentInner';
				document.getElementById(htmlElementId).style.display='none';
			}catch(e){
			}
		}
		if(contentUrl){	/* Url present */
			if(!contentObj.htmlElementId || htmlElementId.indexOf('dynamicCreatedDiv__')==-1){	// Has this content been loaded before ? Might have to figure out a smarter way of checking this.
				if(!document.getElementById(htmlElementId)){
					this.__createAContentDivDynamically(contentObj);
					this.loadContent(contentObj.id,contentUrl,refreshAfterSeconds,false,onCompleteJsCode);
				}
			}
		}
	}
	// }}}
	,
	// {{{ __createAContentDivDynamically()
	/**
	* 	Create the div for a tab dynamically (in case no content exists, i.e. content loaded from external file)
	*
	*	@param Object contentObj PaneSplitterContentModel object.
	*
	*	@private
	*/
	__createAContentDivDynamically : function(contentObj){
		var d = new Date();	// Create unique id for a new div
		var divId = 'dynamicCreatedDiv__' + d.getSeconds() + (Math.random()+'').replace('.','');
		if(!document.getElementById(contentObj.id))divId = contentObj.id;	// Give it the id of the element it's self if it doesn't alredy exists on the page.
		contentObj.__setIdOfContentElement(divId);
		var div = document.createElement('DIV');
		div.id = divId;
		div.className = 'DHTMLSuite_paneContentInner';
		if(contentObj.contentUrl)div.innerHTML = this.parentRef.waitMessage;	// Content url present - Display wait message until content has been loaded.
		this.contentDiv.appendChild(div);
		div.style.display='none';
	}
	// }}}
	,
	// {{{ __showHideContentDiv()
	/**
	* 	Updates the pane view. New content has been selected. call methods for update of header bars, content divs and tabs.
	*
	*	@param Integer index Index of active content ( false = no content exists)
	*
	*	@private
	*/
	__updatePaneView : function(index){
		if(!index && index!==0)index=this.activeContentIndex;
		this.__updateTabContent();
		this.__updateView();
		this.__updateHeaderBar(index);
		this.__showHideContentDiv(index);

		this.__updateTabView(index);
		this.activeContentIndex = index;
	}
	// }}}
	,
	// {{{ __showHideContentDiv()
	/**
	*	Switch between content divs(the inner div inside a pane )
	*
	*	@param Integer index Index of content to show(if false, then do nothing --- because there aren't any content in this pane)
	*
	*	@private
	*/
	__showHideContentDiv : function(index){
		if(index!==false){	// Still content in this pane
			var htmlElementId = this.paneModel.contents[this.activeContentIndex].htmlElementId;
			try{
				document.getElementById(htmlElementId).style.display='none';
			}catch(e){

			}
			var htmlElementId = this.paneModel.contents[index].htmlElementId;
			if(htmlElementId){
				try{
					document.getElementById(htmlElementId).style.display='block';
				}catch(e){
				}
			}
		}
	}
	// }}}
	,
	// {{{ __setSize()
	/**
	*	Set some size attributes for the panes
	*
	*	@param Boolean recursive
	*
	*	@private
	*/
	__setSize : function(recursive){
		var pos = this.paneModel.getPosition().toLowerCase();
		if(pos=='west' || pos=='east'){
			this.divElement.style.width = this.paneModel.size + 'px';
		}
		if(pos=='north' || pos=='south'){
			this.divElement.style.height = this.paneModel.size + 'px';
			this.divElement.style.width = '100%';
		}

		try{
			this.contentDiv.style.height = (this.divElement.clientHeight - this.tabDiv.offsetHeight - this.headerDiv.offsetHeight) + 'px';
		}catch(e){
		}

		if(!recursive){
			window.obj = this;
			setTimeout('window.obj.__setSize(true)',100);
		}

	}
	// }}}
	,
	// {{{ __setTopPosition()
	/**
	*	Set new top position for the pane
	*
	*	@param Integer newTop
	*
	*	@private
	*/
	__setTopPosition : function(newTop){
		this.divElement.style.top = newTop + 'px';
	}
	// }}}
	,
	// {{{ __setLeftPosition()
	/**
	*	Set new left position for the pane
	*
	*	@param Integer newLeft
	*
	*	@private
	*/
	__setLeftPosition : function(newLeft){
		this.divElement.style.left = newLeft + 'px';
	}
	// }}}
	,
	// {{{ __setWidth()
	/**
	*	Set width for the pane
	*
	*	@param Integer newWidth
	*
	*	@private
	*/
	__setWidth : function(newWidth){
		if(this.paneModel.getPosition()=='west' || this.paneModel.getPosition()=='east')this.paneModel.setSize(newWidth);
		newWidth = newWidth + '';
		if(newWidth.indexOf('%')==-1)newWidth = Math.max(1,newWidth) + 'px';
		this.divElement.style.width = newWidth;
	}
	// }}}
	,
	// {{{ __setHeight()
	/**
	*	Set height for the pane
	*
	*	@param Integer newHeight
	*
	*	@private
	*/
	__setHeight : function(newHeight){
		if(this.paneModel.getPosition()=='north' || this.paneModel.getPosition()=='south')this.paneModel.setSize(newHeight);
		this.divElement.style.height = Math.max(1,newHeight) + 'px';
		this.__setSize();	// Set size of inner elements.
	}
	,
	// {{{ __showTransparentDivForResize()
	/**
	 *	Show transparent div used to cover iframes during resize
	 *
	 *
	 * @private
	 */
	__showTransparentDivForResize : function(){
		this.divTransparentForResize.style.display = 'block';
		var ref = this.divTransparentForResize;
		ref.style.height = this.contentDiv.clientHeight + 'px';
		ref.style.width = this.contentDiv.clientWidth + 'px';

	}
	// }}}
	,
	// {{{ __hideTransparentDivForResize()
	/**
	 *	Hide transparent div used to cover iframes during resize
	 *
	 *
	 * @private
	 */
	__hideTransparentDivForResize : function(){
		this.divTransparentForResize.style.display = 'none';
	}
	// }}}
}

/************************************************************************************************************
*	DHTML pane splitter
*
*	Created:						November, 28th, 2006
*	@class Purpose of class:		Creates a pane splitter
*
*	Css files used by this script:	pane-splitter.css
*
*	Demos of this class:			demo-pane-splitter.html
*
* 	Update log:
*
************************************************************************************************************/

/**
* @constructor
* @class Purpose of class:	Creates a pane splitter. (<a href="../../demos/demo-pane-splitter.html" target="_blank">Demo</a>)
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
*/

DHTMLSuite.paneSplitter = function(){
	var dataModel;				// An object of class DHTMLSuite.paneSplitterModel
	var panes;					// An array of DHTMLSuite.paneSplitterPane objects.
	var panesAssociative;		// An associative array of panes. used to get a quick access to the panes
	var paneContent;			// An array of DHTMLSuite.paneSplitterPaneView objects.
	var layoutCSS;				// Name/Path of css file

	var horizontalSplitterSize;	// Height of horizontal splitter
	var horizontalSplitterBorderSize;	// Height of horizontal splitter

	var verticalSplitterSize;	//

	var paneSplitterHandles;				// Associative array of pane splitter handles
	var paneSplitterHandleOnResize;

	var resizeInProgress;					// Variable indicating if resize is in progress

	var resizeCounter;						// Internal variable used while resizing (-1 = no resize, 0 = waiting for resize)
	var currentResize;						// Which pane is currently being resized ( string, "west", "east", "north" or "south"
	var currentResize_min;
	var currentResize_max;

	var paneSizeCollapsed;					// Size of pane when it's collapsed ( the bar )
	var paneBorderLeftPlusRight;			// Sum of border left and right for panes ( needed in a calculation)

	var slideSpeed;							// Slide of pane slide
	var waitMessage;						// Ajax wait message
	var collapseExpandButtons;				// Reference to collapse and expand buttons
	var paneZIndexCounter;

	this.collapseExpandButtons = new Object();
	this.resizeCounter = -1;
	this.horizontalSplitterSize = 6;
	this.verticalSplitterSize = 6;
	this.paneBorderLeftPlusRight = 2;		// 1 pixel border at the right of panes, 1 pixel to the left
	this.slideSpeed = 10;

	this.horizontalSplitterBorderSize = 1;
	this.resizeInProgress = false;
	this.paneSplitterHandleOnResize = false;
	this.paneSizeCollapsed = 18;

	this.paneSplitterHandles = new Object();

	this.dataModel = false;		// Initial value
	this.layoutCSS = 'pane-splitter.css';
	this.waitMessage = 'Loading content - please wait';
	this.panes = new Array();
	this.panesAssociative = new Object();

	this.paneZIndexCounter = 1;

	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}
	var objectIndex;			// Index of this object in the variableStorage array

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

DHTMLSuite.paneSplitter.prototype =
{
	// {{{ addModel()
	/**
	*	Add datasource for the pane splitter
	*
	*	@param Object newModel - Data source, object of class DHTMLSuite.paneSplitterModel
	*
	*	@public
	*/
	addModel : function(newModel){
		this.dataModel = newModel;
	}
	// }}}
	,
	// {{{ setLayoutCss()
	/**
	*	Specify name/path to a css file(default is 'pane-splitter.css')
	*
	*	@param String layoutCSS = Name(or relative path) of new css path
	*	@public
	*/
	setLayoutCss : function(layoutCSS){
		this.layoutCSS = layoutCSS;
	}
	// }}}
	,
	// {{{ setAjaxWaitMessage()
	/**
	*	Specify ajax wait message - message displayed in the pane when content is being loaded from the server.
	*
	*	@param String newWaitMessage = Wait message - plain text or HTML.
	*
	*	@public
	*/
	setAjaxWaitMessage : function(newWaitMessage){
		this.waitMessage = newWaitMessage;

	}
	// }}}
	,
	// {{{ setSizeOfPane()
	/**
	*	Set new size of pane
	*
	*	@param String panePosition = Position of pane(east,west,south or north)
	*	@param Integer newSize = New size of pane in pixels.
	*
	*	@public
	*/
	setSizeOfPane : function(panePosition,newSize){
		if(!this.panesAssociative[panePosition.toLowerCase()])return;
		if(panePosition=='east' || panePosition=='west'){
			this.panesAssociative[panePosition.toLowerCase()].__setWidth(newSize);
		}
		if(panePosition=='north' || panePosition=='south'){
			this.panesAssociative[panePosition.toLowerCase()].__setHeight(newSize);
		}
		this.__positionPanes();

	}
	// }}}
	,
	// {{{ setSlideSpeed()
	/**
	*	Set speed of slide animation.
	*
	*	@param Integer slideSpeed = new slide speed ( higher = faster ) - default = 10
	*
	*	@public
	*/
	setSlideSpeed : function(slideSpeed){
		this.slideSpeed = slideSpeed;
	}
	,
	// {{{ init()
	/**
	*	Initializes the script
	*
	*
	*	@public
	*/
	init : function(){
		DHTMLSuite.commonObj.loadCSS(this.layoutCSS);	// Load css.
		if(this.dataModel.collapseButtonsInTitleBars)this.paneSizeCollapsed = 25;
		this.__createPanes();	// Create the panes
		this.__positionPanes();	// Position panes
		this.__createResizeHandles();
		this.__addEvents();
		this.__initCollapsePanes();
		setTimeout("DHTMLSuite.variableStorage.arrayDSObjects[" + this.objectIndex + "].__positionPanes();",100);
		setTimeout("DHTMLSuite.variableStorage.arrayDSObjects[" + this.objectIndex + "].__positionPanes();",500);
		setTimeout("DHTMLSuite.variableStorage.arrayDSObjects[" + this.objectIndex + "].__positionPanes();",1500);
	}
	// }}}
	,

	// {{{ isUrlLoadedInPane()
	/**
	 *	This method returns true if content with a specific url exists inside a specific content container.
	 *
	 *	@param String id 		- id of content object
	 *	@param String url		- Url of file (Url to check on)
	 *
	 * @public
	 */

	isUrlLoadedInPane : function(id,url){
		var ref = this.__getPaneReferenceFromContentId(id);	// Get a reference to the pane where the content is.
		if(ref){	// Pane found
			return ref.isUrlLoadedInPane(id,url);
		}else return false;
	}
	// }}}
	,
	// {{{ loadContent()
	/**
	 *	This method loads content from server and inserts it into the pane with the given id
	 *	If you want the content to be displayed directly, remember to call the showContent method too.
	 *
	 *	@param String id - id of content object where the element should be inserted
	 *	@param String url		- Url of file (the content of this file will be inserted into the define pane)
	 *	@param Integer refreshAfterSeconds		- Reload url after number of seconds. 0 = no refresh ( also default)
	 *	@param String onCompleteJsCode - Js code to evaluate when content has been successfully loaded(Callback) - example: "myFunction()". This string will be avaluated.
	 *
	 * @public
	 */

	loadContent : function(id,url,refreshAfterSeconds,onCompleteJsCode){
		var ref = this.__getPaneReferenceFromContentId(id);	// Get a reference to the pane where the content is.
		if(ref){	// Pane found
			ref.loadContent(id,url,refreshAfterSeconds,false,onCompleteJsCode);		// Call the loadContent method of this object.
		}
	}
	// }}}
	,
	// {{{ reloadContent()
	/**
	 *	Reloads ajax content
	 *
	 *	@param String id - id of content object to reload.
	 *
	 * @public
	 */
	reloadContent : function(id){
		var ref = this.__getPaneReferenceFromContentId(id);	// Get a reference to the pane where the content is.
		if(ref){	// Pane found
			ref.reloadContent(id);		// Call the loadContent method of this object.
		}
	}
	// }}}
	,
	// {{{ setRefreshAfterSeconds()
	/**
	 *	Specify a new value for when content should be reloaded.
	 *
	 *	@param String idOfContentObject - id of content to add the value to
	 *	@param Integer refreshAfterSeconds - Refresh rate of content (0 = no refresh)
	 *
	 * @public
	 */
	setRefreshAfterSeconds : function(idOfContentObject,refreshAfterSeconds){
		var ref = this.__getPaneReferenceFromContentId(idOfContentObject);	// Get a reference to the pane where the content is.
		if(ref){	// Pane found
			ref.setRefreshAfterSeconds(idOfContentObject,refreshAfterSeconds);		// Call the loadContent method of this object.
		}

	}
	// }}}
	,
	// {{{ setContentTabTitle()
	/**
	 *	New title of tab - i.e. the text inside the clickable tab.
	 *
	 *	@param String idOfContentObject - id of content object
	 *	@param String newTitle - New title of tab
	 *
	 * @public
	 */
	setContentTabTitle : function(idOfContentObject,newTitle){
		var ref = this.__getPaneReferenceFromContentId(idOfContentObject);	// Get a reference to the pane where the content is.
		if(ref)ref.setContentTabTitle(idOfContentObject,newTitle);

	}
	// }}}
	,
	// {{{ setContentTitle()
	/**
	 *	New title of content - i.e. the heading
	 *
	 *	@param String idOfContentObject - id of content object
	 *	@param String newTitle - New title of tab
	 *
	 * @public
	 */
	setContentTitle : function(idOfContentObject,newTitle){
		var ref = this.__getPaneReferenceFromContentId(idOfContentObject);	// Get a reference to the pane where the content is.
		if(ref)ref.setContentTitle(idOfContentObject,newTitle);

	}
	// }}}
	,
	// {{{ showContent()
	/**
	 *	Makes content with a specific id visible
	 *
	 *	@param String id - id of content to make visible(remember to have unique id's on each of your content objects)
	 *
	 * @public
	 */
	showContent : function(id){
		var ref = this.__getPaneReferenceFromContentId(id);
		if(ref)ref.showContent(id);
	}
	// }}}
	,
	// {{{ closeAllClosableTabs()
	/**
	*	Close all closable tabs, i.e. tabs where the closable attribute is set to true.
	*
	*	@param String panePosition
	*
	*	@public
	*/
	closeAllClosableTabs : function(panePosition){
		if(this.panesAssociative[panePosition.toLowerCase()]) return this.panesAssociative[panePosition.toLowerCase()].__closeAllClosableTabs(); else return false;
	}
	// }}}
	,
	// {{{ addContent()
	/**
	*	Add content to a pane
	*
	*	@param String panePosition - Position of pane(west,north,center,east or south)
	*	@param Object contentModel - Object of type DHTMLSuite.paneSplitterContentModel
	*	@param String onCompleteJsCode - Js code to execute when content is successfully loaded.
	*	@return Boolean Success - true if content were added successfully, false otherwise - false means that the pane don't exists or that content with this id allready has been added.
	*	@public
	*/
	addContent : function(panePosition,contentModel,onCompleteJsCode){
		if(this.panesAssociative[panePosition.toLowerCase()]) return this.panesAssociative[panePosition.toLowerCase()].addContent(contentModel,onCompleteJsCode); else return false;

	}
	// }}}
	,
	// {{{ getState()
	/**
	*	Get state of pane
	*
	*	@param String panePosition - Position of pane(west,north,center,east or south)
	*	@return String state of pane - "collapsed" or "expanded".
	*	@public
	*/
	getState : function(panePosition){
		if(this.panesAssociative[panePosition.toLowerCase()]) return this.panesAssociative[panePosition.toLowerCase()].paneModel.__getState();

	}
	// }}}
	,
	// {{{ deleteContentById()
	/**
	*	Delete content from a pane by index
	*
	*	@param String id - Id of content to delete.
	*
	*	@public
	*/
	deleteContentById : function(id){
		var ref = this.__getPaneReferenceFromContentId(id);
		if(ref)ref.__deleteContentById(id);
	}
	// }}}
	,
	// {{{ deleteContentByIndex()
	/**
	*	Delete content from a pane by index
	*
	*	@param String panePosition - Position of pane(west,north,center,east or south)
	*	@param Integer	contentIndex
	*
	*	@public
	*/
	deleteContentByIndex: function(panePosition,contentIndex){
		if(this.panesAssociative[panePosition]){//Pane exists
			this.panesAssociative[panePosition].__deleteContentByIndex(contentIndex);
		}
	}
	// }}}
	,
	// {{{ hidePane()
	/**
	*	Hide a pane
	*
	*	@param String panePosition - Position of pane(west,north,center,east or south)
	*
	*	@public
	*/
	hidePane : function(panePosition){
		if(this.panesAssociative[panePosition] && panePosition!='center'){
			this.panesAssociative[panePosition].hidePane();				 // Call method in paneSplitterPane class
			if(this.paneSplitterHandles[panePosition])this.paneSplitterHandles[panePosition].style.display='none'; // Hide resize handle
			this.__positionPanes();										 // Reposition panes
		}else return false;

	}
	,
	// {{{ showPane()
	/**
	*	Show a previously hidden pane
	*
	*	@param String panePosition - Position of pane(west,north,center,east or south)
	*
	*	@public
	*/
	showPane : function(panePosition){
		if(this.panesAssociative[panePosition] && panePosition!='center'){
			this.panesAssociative[panePosition].showPane();					// Call method in paneSplitterPane class
			if(this.paneSplitterHandles[panePosition])this.paneSplitterHandles[panePosition].style.display='block';	// Show resize handle
			this.__positionPanes();											// Reposition panes
		}else return false;
	}
	// }}}
	,
	// {{{ getReferenceToMainDivElOfPane()
	/**
	*	Get reference to main div element of a pane. This can for example be useful if you're using the imageSelection class and want
	*	To restrict the area for a selection. Maybe you only want your users to start selection within the center pane, not the other panes.
	*
	*	@param String panePosition - Position of pane(west,north,center,east or south)
	*
	*	@public
	*/
	getReferenceToMainDivElOfPane : function(panePosition){
		if(this.panesAssociative[panePosition])return this.panesAssociative[panePosition].__getReferenceTomainDivEl();
		return false;
	}
	// }}}
	,
	// {{{ getIdOfCurrentlyDisplayedContent()
	/**
	* 	Returns id of the content currently being displayed - active tab.
	*
	*	@param String position - which pane. ("west","east","center","north","south")
	*	@return String id of currently displayed content (active tab).
	*
	*	@public
	*/
	getIdOfCurrentlyDisplayedContent : function(panePosition){
		if(this.panesAssociative[panePosition])return this.panesAssociative[panePosition].getIdOfCurrentlyDisplayedContent();
		return false;
	}
	// }}}
	,
	// {{{ getHtmlElIdOfCurrentlyDisplayedContent()
	/**
	* 	Returns html element id of the content currently being displayed - active tab.
	*
	*	@param String position - which pane. ("west","east","center","north","south")
	*	@return String id of currently displayed content(the HTML element) (active tab).
	*
	*	@public
	*/
	getHtmlElIdOfCurrentlyDisplayedContent : function(panePosition){
		if(this.panesAssociative[panePosition])return this.panesAssociative[panePosition].getHtmlElIdOfCurrentlyDisplayedContent();
		return false;
	}
	// }}}
	,
	// {{{ getSizeOfPaneInPixels()
	/**
	* 	Returns id of the content currently being displayed - active tab.
	*
	*	@param String position - which pane. ("west","east","center","north","south")
	*	@return Array - Assocative array representing width and height of the pane(keys in array: "width" and "height").
	*
	*	@public
	*/
	getSizeOfPaneInPixels : function(panePosition){
		if(this.panesAssociative[panePosition])return this.panesAssociative[panePosition].__getSizeOfPaneInPixels();
		return false;

	}
	// }}}
	,
	// {{{ expandPane()
	/**
	 *	Use this method when you manually want to expand a pane
	 *
	 *	@param String panePosition - Position of pane, west,east,north,south
	 *
	 * @public
	 */
	expandPane : function(panePosition){
		if(panePosition=='center')return;
		if(this.panesAssociative[panePosition])this.panesAssociative[panePosition].__expand();
		if(!this.dataModel.collapseButtonsInTitleBars)this.__toggleCollapseExpandButton(panePosition,'expand');
	}
	// }}}
	,
	// {{{ collapsePane()
	/**
	 *	Use this method when you manually want to collapse a pane
	 *
	 *	@param String panePosition - Position of pane, west,east,north,south
	 *
	 * @public
	 */
	collapsePane : function(panePosition){
		if(panePosition=='center')return;
		if(this.panesAssociative[panePosition])this.panesAssociative[panePosition].__collapse();
		if(!this.dataModel.collapseButtonsInTitleBars)this.__toggleCollapseExpandButton(panePosition,'collapse');
	}
	// }}}
	,
	// {{{ __setPaneSizeCollapsed()
	/**
	*	Automatically set size of collapsed pane ( called by a pane - the size is the offsetWidth or offsetHeight of the pane in collapsed state)
	*
	*
	*	@private
	*/
	__setPaneSizeCollapsed : function(newSize){
		return;
		if(newSize>this.paneSizeCollapsed){
			this.paneSizeCollapsed = newSize;
		}
	}
	// }}}
	// }}}
	,
	// {{{ __createPanes()
	/**
	*	Creates the panes
	*
	*
	*	@private
	*/
	__createPanes : function(){
		var dataObjects = this.dataModel.getItems();	// An array of data source objects, i.e. panes.
		for(var no=0;no<dataObjects.length;no++){
			var index = this.panes.length;
			this.panes[index] = new DHTMLSuite.paneSplitterPane(this);
			this.panes[index].addDataSource(dataObjects[no]);
			this.panes[index].__createPane();
			this.panesAssociative[dataObjects[no].position.toLowerCase()] = this.panes[index];	// Save this pane in the associative array
		}
	}
	// }}}
	,
	// {{{ __collapseAPane()
	/**
	 *	Collapse a pane from button
	 *
	 *	@param Event e - Reference to event object, used to get a reference to the clicked butotn.
	 *	@param String panePosition - Position of pane, west,east,north,south
	 *
	 * @private
	 */
	__collapseAPane : function(e,panePosition){
		var ind = this.objectIndex;
		if(document.all) e = event;
		var src = DHTMLSuite.commonObj.getSrcElement(e);
		src.className = src.className.replace(' DHTMLSuite_collapseExpandOver','');
		this.__toggleCollapseExpandButton(panePosition,'collapse');
		if(this.panesAssociative[panePosition])this.panesAssociative[panePosition].__collapse();
		src.onclick = function(e) { return DHTMLSuite.variableStorage.arrayDSObjects[ind].__expandAPane(e,panePosition); } ;

	}
	// }}}
	,
	// {{{ __toggleCollapseExpandButton()
	/**
	 *	Toggle collapse/expand buttons
	 *
	 *	@param String panePosition - Position of pane, west,east,north,south
	 *	@param String state	- expand or collapse
	 *
	 * @private
	 */
	__toggleCollapseExpandButton : function(panePosition,state){
		var src = this.collapseExpandButtons[panePosition];
		var ind = this.objectIndex;
		if(state=='expand'){

			switch(panePosition){
				case "east":
					src.className = src.className.replace('Left','Right');
					src.parentNode.className = src.parentNode.className.replace(' DHTMLSuite_paneSplitter_vertical_noresize','');
					break;
				case "west":
					src.className = src.className.replace('Right','Left');
					src.parentNode.className = src.parentNode.className.replace(' DHTMLSuite_paneSplitter_vertical_noresize','');
					break;
				case "south":
					src.className = src.className.replace('Up','Down');
					src.parentNode.className = src.parentNode.className.replace(' DHTMLSuite_paneSplitter_horizontal_noresize','');
					break;
				case "north":
					src.className = src.className.replace('Down','Up');
					src.parentNode.className = src.parentNode.className.replace(' DHTMLSuite_paneSplitter_horizontal_noresize','');
					break;
			}
			src.onclick = function(e) { return DHTMLSuite.variableStorage.arrayDSObjects[ind].__collapseAPane(e,panePosition); } ;
		}
		if(state=='collapse'){

			switch(panePosition){
				case "west":
					src.className = src.className.replace('Left','Right');
					src.parentNode.className = src.parentNode.className + ' DHTMLSuite_paneSplitter_vertical_noresize';
					break;
				case "east":
					src.className = src.className.replace('Right','Left');
					src.parentNode.className = src.parentNode.className + ' DHTMLSuite_paneSplitter_vertical_noresize';
					break;
				case "north":
					src.className = src.className.replace('Up','Down');
					src.parentNode.className = src.parentNode.className + ' DHTMLSuite_paneSplitter_horizontal_noresize';
					break;
				case "south":
					src.className = src.className.replace('Down','Up');
					src.parentNode.className = src.parentNode.className + ' DHTMLSuite_paneSplitter_horizontal_noresize';
					break;
			}
			src.onclick = function(e) { return DHTMLSuite.variableStorage.arrayDSObjects[ind].__expandAPane(e,panePosition); } ;

		}

	}
	// }}}
	,
	// {{{ __expandAPane()
	/**
	 *	Expand a pane by clicking on a button
	 *
	 *	@param Event e - Event object - used to find reference to clicked button
	 *	@param String panePosition - Position of pane, west,east,north,south
	 *
	 * @private
	 */
	__expandAPane : function(e,panePosition){
		var ind = this.objectIndex;
		if(document.all) e = event;
		var src = DHTMLSuite.commonObj.getSrcElement(e);
		src.className = src.className.replace(' DHTMLSuite_collapseExpandOver','');
		this.__toggleCollapseExpandButton(panePosition,'expand');
		if(this.panesAssociative[panePosition])this.panesAssociative[panePosition].__expand();
		src.onclick = function(e) { return DHTMLSuite.variableStorage.arrayDSObjects[ind].__collapseAPane(e,panePosition); } ;

	}
	// }}}
	,
	// {{{ __createResizeHandles()
	/**
	 *	Positions the resize handles correctly
	 *
	 *
	 * @private
	 */
	__createResizeHandles : function(){
		var ind = this.objectIndex;
		// Create splitter for the north pane
		if(this.panesAssociative['north'] && (this.panesAssociative['north'].paneModel.resizable || (this.panesAssociative['north'].paneModel.collapsable && !this.dataModel.collapseButtonsInTitleBars))){
			this.paneSplitterHandles['north'] = document.createElement('DIV');
			var obj = this.paneSplitterHandles['north'];
			obj.className = 'DHTMLSuite_paneSplitter_horizontal';
			obj.innerHTML = '<span></span>';
			obj.style.position = 'absolute';
			obj.style.height = this.horizontalSplitterSize + 'px';
			obj.style.width = '100%';
			obj.style.zIndex = 10000;
			obj.setAttribute('resizeHandle','1');
			DHTMLSuite.commonObj.addEvent(obj,'mousedown',function(e) { DHTMLSuite.variableStorage.arrayDSObjects[ind].__initResizePane(e,'north'); });
			document.body.appendChild(obj);

			if(!this.dataModel.collapseButtonsInTitleBars){

				var subElement = document.createElement('DIV');
				subElement.className = 'DHTMLSuite_resizeButtonUp';
				subElement.onclick = function(e) { return DHTMLSuite.variableStorage.arrayDSObjects[ind].__collapseAPane(e,'north'); } ;
				subElement.onmouseover = this.__mouseoverCollapseButton;
				subElement.onmouseout = this.__mouseoutCollapseButton;
				subElement.innerHTML = '<span></span>';
				DHTMLSuite.commonObj.__addEventEl(subElement);
				obj.appendChild(subElement);
				this.collapseExpandButtons['north'] = subElement;

				if(this.panesAssociative['north'].paneModel.state=='collapsed')this.__toggleCollapseExpandButton('north','collapse');

				if(!this.panesAssociative['north'].paneModel.collapsable){
					subElement.style.display='none';
					obj.className = obj.className + ' DHTMLSuite_paneSplitter_horizontal_expInTitle';
				}
			}else{
				obj.className = obj.className + ' DHTMLSuite_paneSplitter_horizontal_expInTitle';
			}
			if(!this.panesAssociative['north'].paneModel.resizable)obj.className = obj.className + ' DHTMLSuite_paneSplitter_horizontal_noresize';
		}
		// Create splitter for the west pane
		if(this.panesAssociative['west']){
			this.paneSplitterHandles['west'] = document.createElement('DIV');
			var obj = this.paneSplitterHandles['west'];
			obj.innerHTML = '<span></span>';
			obj.className = 'DHTMLSuite_paneSplitter_vertical';
			obj.style.position = 'absolute';
			obj.style.width = this.verticalSplitterSize + 'px';
			obj.style.zIndex = 11000;
			obj.setAttribute('resizeHandle','1');
			DHTMLSuite.commonObj.addEvent(obj,'mousedown',function(e) { DHTMLSuite.variableStorage.arrayDSObjects[ind].__initResizePane(e,'west'); });
			document.body.appendChild(obj);

			if(!this.dataModel.collapseButtonsInTitleBars){
				var subElement = document.createElement('DIV');
				subElement.className = 'DHTMLSuite_resizeButtonLeft';
				subElement.onclick = function(e) { return DHTMLSuite.variableStorage.arrayDSObjects[ind].__collapseAPane(e,'west'); } ;
				DHTMLSuite.commonObj.__addEventEl(subElement);
				subElement.onmouseover = this.__mouseoverCollapseButton;
				subElement.onmouseout = this.__mouseoutCollapseButton;
				subElement.innerHTML = '<span></span>';
				obj.appendChild(subElement);
				this.collapseExpandButtons['west'] = subElement;
				if(this.panesAssociative['west'].paneModel.state=='collapsed')this.__toggleCollapseExpandButton('west','collapse');
				if(!this.panesAssociative['west'].paneModel.collapsable){
					subElement.style.display='none';
					obj.className = obj.className + ' DHTMLSuite_paneSplitter_vertical_expInTitle';
				}
			}else{
				obj.className = obj.className + ' DHTMLSuite_paneSplitter_vertical_expInTitle';
			}

			if(!this.panesAssociative['west'].paneModel.resizable){
				obj.className = obj.className + ' DHTMLSuite_paneSplitter_vertical_noresize';
			}
		}

		// Create splitter for the east pane
		if(this.panesAssociative['east']){
			this.paneSplitterHandles['east'] = document.createElement('DIV');
			var obj = this.paneSplitterHandles['east'];
			obj.innerHTML = '<span></span>';
			obj.className = 'DHTMLSuite_paneSplitter_vertical';
			obj.style.position = 'absolute';
			obj.style.width = this.verticalSplitterSize + 'px';
			obj.style.zIndex = 11000;
			obj.setAttribute('resizeHandle','1');
			DHTMLSuite.commonObj.addEvent(obj,'mousedown',function(e) { DHTMLSuite.variableStorage.arrayDSObjects[ind].__initResizePane(e,'east'); });
			document.body.appendChild(obj);

			if(!this.dataModel.collapseButtonsInTitleBars){
				var subElement = document.createElement('DIV');
				subElement.className = 'DHTMLSuite_resizeButtonRight';
				subElement.onclick = function(e) { return DHTMLSuite.variableStorage.arrayDSObjects[ind].__collapseAPane(e,'east'); } ;
				subElement.onmouseover = this.__mouseoverCollapseButton;
				subElement.onmouseout = this.__mouseoutCollapseButton;
				subElement.innerHTML = '<span></span>';
				DHTMLSuite.commonObj.__addEventEl(subElement);
				obj.appendChild(subElement);
				this.collapseExpandButtons['east'] = subElement;
				if(this.panesAssociative['east'].paneModel.state=='collapsed')this.__toggleCollapseExpandButton('east','collapse');
				if(!this.panesAssociative['east'].paneModel.collapsable){
					subElement.style.display='none';
					obj.className = obj.className + ' DHTMLSuite_paneSplitter_vertical_expInTitle';
				}
			}else{
				obj.className = obj.className + ' DHTMLSuite_paneSplitter_vertical_expInTitle';
			}
			if(!this.panesAssociative['east'].paneModel.resizable)obj.className = obj.className + ' DHTMLSuite_paneSplitter_vertical_noresize';
		}

		// Create splitter for the south pane
		if(this.panesAssociative['south'] && (this.panesAssociative['south'].paneModel.resizable || (this.panesAssociative['south'].paneModel.collapsable && !this.dataModel.collapseButtonsInTitleBars))){
			this.paneSplitterHandles['south'] = document.createElement('DIV');
			var obj = this.paneSplitterHandles['south'];
			obj.innerHTML = '<span></span>';
			obj.className = 'DHTMLSuite_paneSplitter_horizontal';
			obj.style.position = 'absolute';
			obj.style.height = this.horizontalSplitterSize + 'px';
			obj.style.width = '100%';
			obj.setAttribute('resizeHandle','1');
			obj.style.zIndex = 10000;
			DHTMLSuite.commonObj.addEvent(obj,'mousedown',function(e) { DHTMLSuite.variableStorage.arrayDSObjects[ind].__initResizePane(e,'south'); });
			document.body.appendChild(obj);

			if(!this.dataModel.collapseButtonsInTitleBars){
				var subElement = document.createElement('DIV');
				subElement.style.position='absolute';
				subElement.className = 'DHTMLSuite_resizeButtonDown';
				subElement.onclick = function(e) { return DHTMLSuite.variableStorage.arrayDSObjects[ind].__collapseAPane(e,'south'); } ;
				subElement.onmouseover = this.__mouseoverCollapseButton;
				subElement.onmouseout = this.__mouseoutCollapseButton;
				subElement.innerHTML = '<span></span>';
				DHTMLSuite.commonObj.__addEventEl(subElement);
				obj.appendChild(subElement);
				this.collapseExpandButtons['south'] = subElement;
				if(this.panesAssociative['south'].paneModel.state=='collapsed')this.__toggleCollapseExpandButton('south','collapse');
				if(!this.panesAssociative['south'].paneModel.collapsable){
					subElement.style.display='none';
					obj.className = obj.className + ' DHTMLSuite_paneSplitter_horizontal_expInTitle';
				}
			}else{
				obj.className = obj.className + ' DHTMLSuite_paneSplitter_horizontal_expInTitle';
			}
			if(!this.panesAssociative['south'].paneModel.resizable)obj.className = obj.className + ' DHTMLSuite_paneSplitter_vertical_noresize';
		}

		// Create onresize handle
		this.paneSplitterHandleOnResize = document.createElement('DIV');
		var obj = this.paneSplitterHandleOnResize;
		obj.innerHTML = '<span></span>';
		obj.className = 'DHTMLSuite_paneSplitter_onResize';
		obj.style.position = 'absolute';
		obj.style.zIndex = 955000;
		obj.style.display='none';
		document.body.appendChild(obj);

	}
	// }}}
	,
	// {{{ __mouseoverCollapseButton()
	/**
	 *	Mouse over - collapse button
	 *
	 *
	 * @private
	 */
	__mouseoverCollapseButton : function(){
		this.className = this.className + ' DHTMLSuite_collapseExpandOver';
	}
	// }}}
	,
	// {{{ __mouseoutCollapseButton()
	/**
	 *	Mouse out - collapse butotn
	 *
	 *
	 * @private
	 */
	__mouseoutCollapseButton : function(){
		this.className = this.className.replace(' DHTMLSuite_collapseExpandOver','');
	}
	// }}}
	,
	// {{{ __getPaneReferenceFromContentId()
	/**
	 *	Returns a reference to a pane from content id
	 *
	 *	@param String id - id of content
	 *
	 * @private
	 */
	__getPaneReferenceFromContentId : function(id){
		for(var no=0;no<this.panes.length;no++){
			var contents = this.panes[no].paneModel.getContents();
			for(var no2=0;no2<contents.length;no2++){
				if(contents[no2].id==id)return this.panes[no];
			}
		}
		return false;

	}
	// }}}
	,
	// {{{ __initCollapsePanes()
	/**
	 *	Initially collapse panes
	 *
	 *
	 * @private
	 */
	__initCollapsePanes : function(){
		for(var no=0;no<this.panes.length;no++){	/* Loop through panes */
			if(this.panes[no].paneModel.state=='collapsed'){	// State set to collapsed ?
				this.panes[no].__collapse();
			}
		}
	}
	// }}}
	,
	// {{{ __getMinimumPos()
	/**
	 *	Returns mininum pos in pixels
	 *
	 *	@param String pos ("west","north","east","south")
	 *
	 * @private
	 */
	__getMinimumPos : function(pos){
		var browserWidth = DHTMLSuite.clientInfoObj.getBrowserWidth();
		var browserHeight = DHTMLSuite.clientInfoObj.getBrowserHeight();

		if(pos=='west' || pos == 'north'){
			return 	this.panesAssociative[pos].paneModel.minSize;
		}else{
			if(pos=='east')return 	browserWidth - this.panesAssociative[pos].paneModel.maxSize;
			if(pos=='south')return 	browserHeight - this.panesAssociative[pos].paneModel.maxSize;
		}
	}
	// }}}
	,
	// {{{ __getMaximumPos()
	/**
	 *	Returns maximum pos in pixels
	 *
	 *	@param String pos ("west","north","east","south")
	 *
	 * @private
	 */
	__getMaximumPos : function(pos){
		var browserWidth = DHTMLSuite.clientInfoObj.getBrowserWidth();
		var browserHeight = DHTMLSuite.clientInfoObj.getBrowserHeight();

		if(pos=='west' || pos == 'north'){
			return 	this.panesAssociative[pos].paneModel.maxSize;
		}else{
			if(pos=='east')return 	browserWidth - this.panesAssociative[pos].paneModel.minSize;
			if(pos=='south')return 	browserHeight - this.panesAssociative[pos].paneModel.minSize;
		}
	}
	// }}}
	,
	// {{{ __initResizePane()
	/**
	 *	Mouse down on resize handle.
	 *
	 *	@param String pos ("west","north","east","south")
	 *
	 * @private
	 */
	__initResizePane : function(e,pos){
		if(document.all)e = event;
		var obj = DHTMLSuite.commonObj.getSrcElement(e);	// Reference to element triggering the event.
		var attr = obj.getAttribute('resizeHandle');
		if(!attr)attr = obj.resizeHandle;
		if(!attr)return;
		if(obj.className.indexOf('noresize')>=0)return;
		this.currentResize = pos;
		this.currentResize_min = this.__getMinimumPos(pos);
		this.currentResize_max = this.__getMaximumPos(pos);

		this.paneSplitterHandleOnResize.style.left = this.paneSplitterHandles[pos].style.left;
		this.paneSplitterHandleOnResize.style.top = this.paneSplitterHandles[pos].style.top;
		this.paneSplitterHandleOnResize.style.width = this.paneSplitterHandles[pos].offsetWidth + 'px';
		this.paneSplitterHandleOnResize.style.height = this.paneSplitterHandles[pos].offsetHeight + 'px';
		this.paneSplitterHandleOnResize.style.display='block';
		this.resizeCounter = 0;
		DHTMLSuite.commonObj.__setTextSelOk(false);
		this.__timerResizePane(pos);

	}
	// }}}
	,
	// {{{ __timerResizePane()
	/**
	 *	A small delay between mouse down and resize start
	 *
	 *	@param String pos - which pane to resize.
	 *
	 * @private
	 */
	__timerResizePane : function(pos){
		if(this.resizeCounter>=0 && this.resizeCounter<5){
			this.resizeCounter++;
			setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + this.objectIndex + '].__timerResizePane()',2);
			return;
		}
		if(this.resizeCounter==5){
			this.__showTransparentDivForResize('show');
		}
	}
	// }}}
	,
	// {{{ __showTransparentDivForResize()
	/**
	 *	Show transparent divs used to cover iframes during resize
	 *
	 *	This is a solution to the problem where you're unable to drag the resize handle over iframes.
	 *
	 * @private
	 */
	__showTransparentDivForResize : function(){
		if(DHTMLSuite.clientInfoObj.isOpera)return;	// Opera doesn't support transparent div the same way as FF and IE.
		if(this.panesAssociative['west'])this.panesAssociative['west'].__showTransparentDivForResize();
		if(this.panesAssociative['south'])this.panesAssociative['south'].__showTransparentDivForResize();
		if(this.panesAssociative['east'])this.panesAssociative['east'].__showTransparentDivForResize();
		if(this.panesAssociative['north'])this.panesAssociative['north'].__showTransparentDivForResize();
		if(this.panesAssociative['center'])this.panesAssociative['center'].__showTransparentDivForResize();

	}
	// }}}
	,
	// {{{ __hideTransparentDivForResize()
	/**
	 *	Hide transparent divs used to cover iframes during resize
	 *
	 *
	 * @private
	 */
	__hideTransparentDivForResize : function(){
		if(this.panesAssociative['west'])this.panesAssociative['west'].__hideTransparentDivForResize();
		if(this.panesAssociative['south'])this.panesAssociative['south'].__hideTransparentDivForResize();
		if(this.panesAssociative['east'])this.panesAssociative['east'].__hideTransparentDivForResize();
		if(this.panesAssociative['north'])this.panesAssociative['north'].__hideTransparentDivForResize();
		if(this.panesAssociative['center'])this.panesAssociative['center'].__hideTransparentDivForResize();

	}
	// }}}
	,
	// {{{ __resizePane()
	/**
	 *	Position the resize handle
	 *
	 *
	 * @private
	 */
	__resizePane : function(e){
		if(document.all)e = event;	// Get reference to event object.

		if(DHTMLSuite.clientInfoObj.isMSIE && e.button!=1)this.__endResize();

		if(this.resizeCounter==5){	/* Resize in progress */
			if(this.currentResize=='west' || this.currentResize=='east'){
				var leftPos = e.clientX;
				if(leftPos<this.currentResize_min)leftPos = this.currentResize_min;
				if(leftPos>this.currentResize_max)leftPos = this.currentResize_max;
				this.paneSplitterHandleOnResize.style.left = leftPos + 'px';
			}else{
				var topPos = e.clientY;
				if(topPos<this.currentResize_min)topPos = this.currentResize_min;
				if(topPos>this.currentResize_max)topPos = this.currentResize_max;
				this.paneSplitterHandleOnResize.style.top = topPos + 'px';
			}
		}
	}
	// }}}
	,
	// {{{ __endResize()
	/**
	 *	End resizing	(mouse up event )
	 *
	 *
	 * @private
	 */
	__endResize : function(){

		if(this.resizeCounter==5){	// Resize completed
			this.__hideTransparentDivForResize();
			var browserWidth = DHTMLSuite.clientInfoObj.getBrowserWidth();
			var browserHeight = DHTMLSuite.clientInfoObj.getBrowserHeight();
			var obj = this.panesAssociative[this.currentResize];
			switch(this.currentResize){
				case "west":
					obj.__setWidth(this.paneSplitterHandleOnResize.style.left.replace('px','')/1-2);
					break;
				case "north":
					obj.__setHeight(this.paneSplitterHandleOnResize.style.top.replace('px','')/1);
					break;
				case "east":
					obj.__setWidth(browserWidth - this.paneSplitterHandleOnResize.style.left.replace('px','')/1-8);
					break;
				case "south":
					obj.__setHeight(browserHeight - this.paneSplitterHandleOnResize.style.top.replace('px','')/1-7);
					break;
			}
			this.__positionPanes();
			obj.__executeResizeCallBack();

			this.paneSplitterHandleOnResize.style.display='none';
			this.resizeCounter = -1;
			DHTMLSuite.commonObj.__setTextSelOk(true);

		}

	}
	// }}}
	,
	// {{{ __hideResizeHandle()
	/**
	 *	Hide resize handle.
	 *
	 *
	 * @private
	 */
	__hideResizeHandle : function(pos){
		if(!this.paneSplitterHandles[pos])return;
		switch(pos){
			case "east":
			case "west":
				this.paneSplitterHandles[pos].className = this.paneSplitterHandles[pos].className + ' DHTMLSuite_paneSplitter_vertical_noresize';
				break;
			case "north":
			case "south":
				this.paneSplitterHandles[pos].className = this.paneSplitterHandles[pos].className + ' DHTMLSuite_paneSplitter_horizontal_noresize';
		}
	}
	// }}}
	,
	// {{{ __showResizeHandle()
	/**
	 *	Make resize handle visible
	 *
	 *
	 * @private
	 */
	__showResizeHandle : function(pos){
		if(!this.paneSplitterHandles[pos])return;
		switch(pos){
			case "east":
			case "west":
				this.paneSplitterHandles[pos].className = this.paneSplitterHandles[pos].className.replace(' DHTMLSuite_paneSplitter_vertical_noresize','');
				break;
			case "north":
			case "south":
				this.paneSplitterHandles[pos].className = this.paneSplitterHandles[pos].className.replace(' DHTMLSuite_paneSplitter_horizontal_noresize','');
		}

	}
	// }}}
	,
	// {{{ __positionResizeHandles()
	/**
	 *	Positions the resize handles correctly
	 *	This method is called by the __positionPanes method.
	 *
	 *
	 * @private
	 */
	__positionResizeHandles : function(){
		if(this.paneSplitterHandles['north']){	// Position north splitter handle
			if(this.panesAssociative['north'].paneModel.state=='expanded'){
				this.paneSplitterHandles['north'].style.top = this.panesAssociative['north'].divElement.style.height.replace('px','')  + 'px';
			}else{
				this.paneSplitterHandles['north'].style.top = this.paneSizeCollapsed  + 'px';
			}
		}
		var heightHandler = this.panesAssociative['center'].divElement.offsetHeight+1;	// Initial height
		var topPos=0;
		if(this.panesAssociative['center'])topPos +=this.panesAssociative['center'].divElement.style.top.replace('px','')/1;

		if(this.paneSplitterHandles['west']){
			if(this.paneSplitterHandles['east'])heightHandler+=this.horizontalSplitterBorderSize/2;
			if(this.panesAssociative['west'].paneModel.state=='expanded'){
				this.paneSplitterHandles['west'].style.left = this.panesAssociative['west'].divElement.offsetWidth + 'px';
			}else{
				this.paneSplitterHandles['west'].style.left = this.paneSizeCollapsed + 'px';
			}
			this.paneSplitterHandles['west'].style.height = heightHandler + 'px';
			this.paneSplitterHandles['west'].style.top = topPos + 'px';
		}
		if(this.paneSplitterHandles['east']){
			var leftPos = this.panesAssociative['center'].divElement.style.left.replace('px','')/1 + this.panesAssociative['center'].divElement.offsetWidth;
			this.paneSplitterHandles['east'].style.left = leftPos + 'px';
			this.paneSplitterHandles['east'].style.height = heightHandler + 'px';
			this.paneSplitterHandles['east'].style.top = topPos + 'px';
		}
		if(this.paneSplitterHandles['south']){
			var topPos = this.panesAssociative['south'].divElement.style.top.replace('px','')/1;
			topPos = topPos - this.horizontalSplitterSize - this.horizontalSplitterBorderSize;
			this.paneSplitterHandles['south'].style.top = topPos + 'px';
		}
		this.resizeInProgress = false;

	}
	// }}}
	,
	// {{{ __positionPanes()
	/**
	 *	Positions the panes correctly
	 *
	 *
	 * @private
	 */
	__positionPanes : function(){
		if(this.resizeInProgress)return;
		var ind = this.objectIndex;
		this.resizeInProgress = true;
		var browserWidth = DHTMLSuite.clientInfoObj.getBrowserWidth();
		var browserHeight = DHTMLSuite.clientInfoObj.getBrowserHeight();

		// Position north pane
		var posTopMiddlePanes = 0;
		if(this.panesAssociative['north'] && this.panesAssociative['north'].paneModel.visible){
			if(this.panesAssociative['north'].paneModel.state=='expanded'){
				posTopMiddlePanes = this.panesAssociative['north'].divElement.offsetHeight;

				this.panesAssociative['north'].__setHeight(this.panesAssociative['north'].divElement.offsetHeight);
			}else{
				posTopMiddlePanes+=this.paneSizeCollapsed;
			}
			if(this.paneSplitterHandles['north'])posTopMiddlePanes+=(this.horizontalSplitterSize + this.horizontalSplitterBorderSize);
		}

		// Set top position of center,west and east pa
		if(this.panesAssociative['center'])this.panesAssociative['center'].__setTopPosition(posTopMiddlePanes);
		if(this.panesAssociative['west'])this.panesAssociative['west'].__setTopPosition(posTopMiddlePanes);
		if(this.panesAssociative['east'])this.panesAssociative['east'].__setTopPosition(posTopMiddlePanes);

		if(this.panesAssociative['west'])this.panesAssociative['west'].divElCollapsed.style.top = posTopMiddlePanes + 'px';
		if(this.panesAssociative['east'])this.panesAssociative['east'].divElCollapsed.style.top = posTopMiddlePanes + 'px';

		// Position center pane
		var posLeftCenterPane = 0;
		if(this.panesAssociative['west']){
			if(this.panesAssociative['west'].paneModel.state=='expanded'){	// West panel is expanded.
				posLeftCenterPane = this.panesAssociative['west'].divElement.offsetWidth;
				this.panesAssociative['west'].__setLeftPosition(0);

			}else{	// West panel is not expanded.
				posLeftCenterPane+=this.paneSizeCollapsed  ;
			}
			posLeftCenterPane+=(this.verticalSplitterSize);
		}

		this.panesAssociative['center'].__setLeftPosition(posLeftCenterPane);

		// Set size of center pane
		var sizeCenterPane = browserWidth;
		if(this.panesAssociative['west'] && this.panesAssociative['west'].paneModel.visible){	// Center pane exists and is visible - decrement width of center pane
			if(this.panesAssociative['west'].paneModel.state=='expanded')
				sizeCenterPane -= this.panesAssociative['west'].divElement.offsetWidth;
			else
				sizeCenterPane -= this.paneSizeCollapsed;
		}

		if(this.panesAssociative['east'] && this.panesAssociative['east'].paneModel.visible){	// East pane exists and is visible - decrement width of center pane
			 if(this.panesAssociative['east'].paneModel.state=='expanded')
			 	sizeCenterPane -= this.panesAssociative['east'].divElement.offsetWidth;
			 else{
			 	sizeCenterPane -= this.paneSizeCollapsed;
			 	if(DHTMLSuite.clientInfoObj.isOldMSIE)sizeCenterPane-=4;
			 }
		}
		sizeCenterPane-=this.paneBorderLeftPlusRight;
		if(this.paneSplitterHandles['west'])sizeCenterPane-=(this.verticalSplitterSize);
		if(this.paneSplitterHandles['east'])sizeCenterPane-=(this.verticalSplitterSize);

		this.panesAssociative['center'].__setWidth(sizeCenterPane);

		// Position east pane
		var posEastPane = posLeftCenterPane + this.panesAssociative['center'].divElement.offsetWidth;
		if(this.paneSplitterHandles['east'])posEastPane+=(this.verticalSplitterSize);
		if(this.panesAssociative['east']){
			if(this.panesAssociative['east'].paneModel.state=='expanded')this.panesAssociative['east'].__setLeftPosition(posEastPane);
			this.panesAssociative['east'].divElCollapsed.style.left = '';
			this.panesAssociative['east'].divElCollapsed.style.right = '0px';
		}
		// Set height of middle panes
		var heightMiddleFrames = browserHeight;
		if(this.panesAssociative['north'] && this.panesAssociative['north'].paneModel.visible){
			if(this.panesAssociative['north'].paneModel.state=='expanded'){
				heightMiddleFrames-= this.panesAssociative['north'].divElement.offsetHeight;

			}else
				heightMiddleFrames-= this.paneSizeCollapsed;
			if(this.paneSplitterHandles['north'])heightMiddleFrames-=(this.horizontalSplitterSize + this.horizontalSplitterBorderSize);

		}
		if(this.panesAssociative['south'] && this.panesAssociative['south'].paneModel.visible){
			if(this.panesAssociative['south'].paneModel.state=='expanded'){
				heightMiddleFrames-=this.panesAssociative['south'].divElement.offsetHeight;
			}else
				heightMiddleFrames-=this.paneSizeCollapsed;
			if(this.paneSplitterHandles['south'])heightMiddleFrames-=(this.horizontalSplitterSize + this.horizontalSplitterBorderSize);
		}

		if(this.panesAssociative['center'])this.panesAssociative['center'].__setHeight(heightMiddleFrames);
		if(this.panesAssociative['west'])this.panesAssociative['west'].__setHeight(heightMiddleFrames);
		if(this.panesAssociative['east'])this.panesAssociative['east'].__setHeight(heightMiddleFrames);

		// Position south pane
		var posSouth = 0;
		if(this.panesAssociative['north']){	/* Step 1 - get height of north pane */
			if(this.panesAssociative['north'].paneModel.state=='expanded'){
				posSouth = this.panesAssociative['north'].divElement.offsetHeight;
			}else
				posSouth = this.paneSizeCollapsed;
		}

		posSouth += heightMiddleFrames;

		if(this.paneSplitterHandles['south']){
			posSouth+=(this.horizontalSplitterSize + this.horizontalSplitterBorderSize);
		}
		if(this.paneSplitterHandles['north']){
			posSouth+=(this.horizontalSplitterSize + this.horizontalSplitterBorderSize);
		}

		if(this.panesAssociative['south']){
			this.panesAssociative['south'].__setTopPosition(posSouth);
			this.panesAssociative['south'].divElCollapsed.style.top = posSouth + 'px';
			this.panesAssociative['south'].__setWidth('100%');
		}
		try{
			if(this.panesAssociative['west']){
				this.panesAssociative['west'].divElCollapsed.style.height = (heightMiddleFrames) + 'px';
				this.panesAssociative['west'].divElCollapsedInner.style.height = (heightMiddleFrames -1) + 'px';
			}
		}catch(e){

		}
		if(this.panesAssociative['east']){
			try{
				this.panesAssociative['east'].divElCollapsed.style.height = heightMiddleFrames + 'px';
				this.panesAssociative['east'].divElCollapsedInner.style.height = (heightMiddleFrames - 1) + 'px';
			}catch(e){
			}
		}
		if(this.panesAssociative['south']){
			this.panesAssociative['south'].divElCollapsed.style.width = browserWidth + 'px';

			if(this.panesAssociative['south'].paneModel.state=='collapsed' && this.panesAssociative['south'].divElCollapsed.offsetHeight){	// Increasing the size of the southern pane

				var rest = browserHeight -  this.panesAssociative['south'].divElCollapsed.style.top.replace('px','')/1 - this.panesAssociative['south'].divElCollapsed.offsetHeight;

				if(rest>0)this.panesAssociative['south'].divElCollapsed.style.height = (this.panesAssociative['south'].divElCollapsed.offsetHeight + rest) + 'px';
			}

		}

		if(this.panesAssociative['north']){
			this.panesAssociative['north'].divElCollapsed.style.width = browserWidth + 'px';
		}

		this.__positionResizeHandles();
		setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].__positionResizeHandles()',50);	// To get the tabs positioned correctly.
	}
	// }}}
	,
	// {{{ __autoSlideInPanes()
	/**
	 *	Automatically slide in panes .
	 *
	 *
	 * @private
	 */
	__autoSlideInPanes : function(e){
		if(document.all)e = event;
		if(this.panesAssociative['south'])this.panesAssociative['south'].__autoSlideInPane(e);
		if(this.panesAssociative['west'])this.panesAssociative['west'].__autoSlideInPane(e);
		if(this.panesAssociative['north'])this.panesAssociative['north'].__autoSlideInPane(e);
		if(this.panesAssociative['east'])this.panesAssociative['east'].__autoSlideInPane(e);

	}
	// }}}
	,
	// {{{ __addEvents()
	/**
	 *	Add basic events for the paneSplitter widget
	 *
	 *
	 * @private
	 */
	__addEvents : function(){
		var ind = this.objectIndex;
		DHTMLSuite.commonObj.addEvent(window,'resize',function() { DHTMLSuite.variableStorage.arrayDSObjects[ind].__positionPanes(); });
		DHTMLSuite.commonObj.addEvent(document.documentElement,'mouseup',function() { DHTMLSuite.variableStorage.arrayDSObjects[ind].__endResize(); });
		DHTMLSuite.commonObj.addEvent(document.documentElement,'mousemove',function(e) { DHTMLSuite.variableStorage.arrayDSObjects[ind].__resizePane(e); });
		DHTMLSuite.commonObj.addEvent(document.documentElement,'click',function(e) { DHTMLSuite.variableStorage.arrayDSObjects[ind].__autoSlideInPanes(e); });
		document.documentElement.onselectstart = function() { return DHTMLSuite.commonObj.__isTextSelOk(); };
		DHTMLSuite.commonObj.__addEventEl(window);
	}
}

/*[FILE_START:dhtmlSuite-listModel.js] */
/************************************************************************************************************
*	listModel
*
*	Created:						December, 14th, 2006
*	@class Purpose of class:		An object storing a collection of values and texts
*
*	Css files used by this script:
*
*	Demos of this class:
*
*	Uses classes:					DHTMLSuite.textEditModel
*
* 	Update log:
*
************************************************************************************************************/
/**
* @constructor
* @class Purpose of class:	listModel (<a href="../../demos/demo-text-edit.html" target="_blank">Demo</a>)
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
*/
DHTMLSuite.listModel = function(inputArray){
	var options;
	this.options = new Array();
}

DHTMLSuite.listModel.prototype =
{
	// {{{ addElement()
	/**
	 *	Add a single element to the listModel
	 *
	 *  @param String value = Value of element
	 *  @param String text = Text of element
	 *
	 *  @public
	 */
	addElement : function(value,text){
		var index = this.options.length;
		this.options[index] = new Object();
		this.options[index].value = value;
		this.options[index].text = text;
	}
	// }}}
	,
	// {{{ deleteAll()
	/**
	 *	Clear all options from the list
	 *
	 *  @public
	 */
	deleteAll : function(){
		this.options.length=0;
	}
	// }}}
	,
	// {{{ deleteOptionByValue()
	/**
	 *	Delete option by value
	 *	@param String value - value of option to delete
	 *
	 *  @public
	 */
	deleteOptionByValue : function(value){
		for(var no=0;no<this.options.length;no++){
			if(this.options[no].value==value){
				this.options.splice(no,1);
				return;
			}
		}
	}
	,
	// {{{ createFromMarkupSelect()
	/**
	 *	Create listModel object from Select tag. value and text of option tags becomes value and text in the listModel.
	 *	This method hides the select box when done.
	 *
	 *  @param String elId Id of SELECT tag
	 *
	 *  @public
	 */
	createFromMarkupSelect : function(elId){
		var obj = document.getElementById(elId);
		if(obj && obj.tagName.toLowerCase()!='select')obj = false;
		if(!obj){
			alert('Error in listModel.createFromMarkupSelect - cannot create elements from select box with id ' + elId);
			return;
		}
		for(var no=0;no<obj.options.length;no++){
			var index = this.options.length;
			this.options[index] = new Object();
			this.options[index].value = obj.options[no].value;
			this.options[index].text = obj.options[no].text;
		}
		obj.style.display='none';
	}
	,
	// {{{ createFromMarkupUlLi()
	/**
	 *	Create listModel object from UL,LI tags. the value is the title of the lis, text is innerHTML, example <LI title="1">Norway</li>
	 *	This methods hides the UL object
	 *
	 *  @param String elId Id of UL tag
	 *
	 *  @public
	 */
	createFromMarkupUlLi : function(elId){
		var obj = document.getElementById(elId);
		if(obj && obj.tagName.toLowerCase()!='ul')obj = false;
		if(!obj){
			alert('Error in listModel.createFromMarkupSelect - cannot create elements from select box with id ' + elId);
			return;
		}
		var lis = obj.getElementsByTagName('LI');
		for(var no=0;no<lis.length;no++){
			var index = this.options.length;
			this.options[index] = new Object();
			this.options[index].value = lis[no].getAttribute('title');
			if(!this.options[index].value)this.options[index].value = lis[no].title;
			this.options[index].text = lis[no].innerHTML;
		}
		obj.style.display='none';
	}
}

/*[FILE_START:dhtmlSuite-textEditModel.js] */
/************************************************************************************************************
*	DHTML Text Edit Model Class
*
*	Created:						December, 14th, 2006
*	@class Purpose of class:		Data model for the textEdit class
*
*	Css files used by this script:
*
*	Demos of this class:
*
*	Uses classes:					DHTMLSuite.listModel
*
* 	Update log:
*
************************************************************************************************************/
/**
* @constructor
* @class Purpose of class:	Data model for the textEdit class. (<a href="../../demos/demo-text-edit.html" target="_blank">Demo</a>)
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
*/
DHTMLSuite.textEditModel = function(inputArray){
	var labelId;				// Id of label for editable element.
	var targetId;				// Id of editable element.
	var serversideFile;			// If individual serverside file should be used for this option
	var optionObj;				// Reference to object of class DHTMLSuite.listModel

	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}

	if(inputArray)this.addElement(inputArray);
}

DHTMLSuite.textEditModel.prototype =
{
	// {{{ addElement()
	/**
	 *	Add item
	 *
	 *  @param Array inputArray - Associative array of properties, possible keys: labelId,elementId,serverFile,listModel
	 *
	 *  @public
	 */
	addElement : function(inputArray){
		if(inputArray['labelId'])this.labelId = inputArray['labelId'];
		if(inputArray['elementId'])this.elementId = inputArray['elementId'];
		if(inputArray['serverFile'])this.serverFile = inputArray['serverFile'];
		if(inputArray['listModel'])this.listModel = inputArray['listModel'];
	}
}

/*[FILE_START:dhtmlSuite-textEdit.js] */
/************************************************************************************************************
*	DHTML Text Edit Class
*
*	Created:						November, 4th, 2006
*	@class Purpose of class:		Make standard HTML elements editable
*
*	Css files used by this script:	text-edit.css
*
*	Demos of this class:			demo-text-edit.html
*
*	Uses classes:					DHTMLSuite.textEditModel
*									DHTMLSuite.listModel;
*
* 	Update log:
*
************************************************************************************************************/
/**
* @constructor
* @class Purpose of class:	Make standard HTML elements editable (<a href="../../demos/demo-text-edit.html" target="_blank">Demo</a>)
*
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
*/
DHTMLSuite.textEdit = function(){
	var layoutCSS;			// Name of css file
	var elements;			// Array of editable elements
	var elementsAssociative;	// Associative version of the array above - need two because of conflicts with Prototype library when using for in loops.
	var serversideFile;		// Path to file on the server where changes are sent.
	var objectIndex;
	var inputObjects;		// Array of inputs or select boxes

	this.layoutCSS = 'text-edit.css';
	this.elements = new Array();
	this.elementsAssociative = new Object();
	this.inputObjects = new Object();

	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.textEdit.prototype =
{
	// {{{ setLayoutCss()
	/**
	 *	Add menu items
	 *
	 *  @param String cssFileName Name of css file
	 *
	 *  @public
	 */
	setLayoutCss : function(layoutCSS){
		this.layoutCSS = layoutCSS;
	}
	// }}}
	,
	// {{{ setServersideFile()
	/**
	 *	Specify server side file.
	 *
	 *  @param String serversideFile 	Path to server side file where changes are sent. This file will be called with the following arguments: saveTextEdit=1 and textEditElementId=<elementId> and textEditValue=<value>
	 *									This file should return OK when everything went fine with the request
	 *
	 *
	 *	@type void
	 *  @public
	 */
	setServersideFile : function(serversideFile){
		this.serversideFile = serversideFile;
	}
	// }}}
	,
	// {{{ addElement()
	/**
	 *	Add editable element
	 *
	 *  @param Array Element description = Associative array, possible keys: labelId,elementId,listModel,serverFile
	 *		if serverFile is given, this value will override the serversideFile property of this class for this particular element
	 *
	 *	@type void
	 *  @public
	 */
	addElement : function(inputArray){
		var index = this.elements.length;
		try{
			this.elements[index] = new DHTMLSuite.textEditModel(inputArray);
		}catch(e){
			alert('Error: You need to include dhtmlSuite-textEditModel.js in your html file');
		}
		this.elementsAssociative[inputArray['elementId']] = this.elements[index];
	}
	// }}}
	,
	// {{{ init()
	/**
	 *	Initializes the widget
	 *
	 *
	 * @public
	 */
	init : function(){
		DHTMLSuite.commonObj.loadCSS(this.layoutCSS);

		var index = this.objectIndex;

		for(var no=0;no<this.elements.length;no++){
			var obj = this.elements[no];

			var label = document.getElementById(obj.labelId);
			if(label){
				label.setAttribute('elementId',obj.elementId);
				if(!label.getAttribute('elementId'))label.elementId = obj.elementId;

				if(label.className){
					label.setAttribute('origClassname',label.className);
					label.origClassname = label.className;
				}
				label.onclick = function(e){ DHTMLSuite.variableStorage.arrayDSObjects[index].__clickOnLabel(e); }
				DHTMLSuite.commonObj.__addEventEl(label);
			}

			var el = document.getElementById(obj.elementId);
			DHTMLSuite.commonObj.__addEventEl(el);
			if(el){

				el.onclick = function(e) { DHTMLSuite.variableStorage.arrayDSObjects[index].__clickOnElement(e); }

				if(obj.listModel){	/* List model exists - create select box */
					this.inputObjects[obj.elementId] = document.createElement('SELECT');
					var selObj = this.inputObjects[obj.elementId];
					selObj.className = 'DHTMLSuite_textEdit_select';
					for(var no2=0;no2<obj.listModel.options.length;no2++){
						selObj.options[selObj.options.length] = new Option(obj.listModel.options[no2].text,obj.listModel.options[no2].value);
					}
					selObj.id = 'input___' + el.id;
					selObj.onblur = function(e){ DHTMLSuite.variableStorage.arrayDSObjects[index].__exitEditMode(e); }
					DHTMLSuite.commonObj.__addEventEl(selObj);
					el.parentNode.insertBefore(selObj,el);
					selObj.style.display='none';
				}else{
					this.inputObjects[obj.elementId] = document.createElement('INPUT');
					var input = this.inputObjects[obj.elementId];
					input.onblur = function(e){ DHTMLSuite.variableStorage.arrayDSObjects[index].__exitEditMode(e); }
					DHTMLSuite.commonObj.__addEventEl(input);

					input.className = 'DHTMLSuite_textEdit_input';
					input.id = 'input___' + el.id;
					input.value = el.innerHTML;
					el.parentNode.insertBefore(input,el);
					input.style.display='none';

				}

			}
		}

	}
	// }}}
	,
	// {{{ __setLabelClassName()
	/**
	 *	Update the class for the label
	 *
	 *  @param Event e - Id of element
	 *
	 * @private
	 */
	__setLabelClassName : function(obj,state){
		if(state=='active')
			obj.className = 'DHTMLSuite_textEdit_label';
		else{
			var className = '';
			className = obj.getAttribute('origClassname');
			if(!className)className = obj.origClassname;
			obj.className = className;
		}
	}
	// }}}
	,
	// {{{ __clickOnLabel()
	/**
	 *	Click on label
	 *
	 *  @param Event e - Id of element
	 *
	 * @private
	 */
	__clickOnLabel : function(e){
		if(document.all)e = event;
		var obj = DHTMLSuite.commonObj.getSrcElement(e);	// Reference to element triggering the event.
		this.__setLabelClassName(obj,'active');
		var elementId = obj.getAttribute('elementId');
		this.__clickOnElement(false,document.getElementById(elementId));
	}
	// }}}
	,
	// {{{ __clickOnElement()
	/**
	 *	Click on editable element
	 *
	 *  @param Event e - Id of element
	 *	@param Object obj - Element triggering the event(this value is empty when the method is fired by an event)
	 *
	 * @private
	 */
	__clickOnElement : function(e,obj){
		if(document.all)e = event;
		if(!obj)var obj = DHTMLSuite.commonObj.getSrcElement(e);	// Reference to element triggering the event.
		var id = obj.id;
		var dataSource = this.elementsAssociative[id];
		if(dataSource.listModel)this.__setSelectBoxValue(id,obj.innerHTML);
		if(dataSource.labelId)this.__setLabelClassName(document.getElementById(dataSource.labelId),'active');
		this.inputObjects[id].style.display='';
		this.inputObjects[id].focus();
		if(!dataSource.listModel)this.inputObjects[id].select();
		obj.style.display='none';
	}
	// }}}
	,
	// {{{ __setSelectBoxValue()
	/**
	 *	Update select box to the value of the element
	 *
	 *  @param String id - Id of element
	 *	@param String value - Value of element
	 *
	 * @private
	 */
	__setSelectBoxValue : function(id,value){
		var selObj = this.inputObjects[id];
		for(var no=0;no<selObj.options.length;no++){
			if(selObj.options[no].text==value){
				selObj.selectedIndex = no;
				return;
			}
		}
	}
	// }}}
	,
	// {{{ __exitEditMode()
	/**
	 *	Exit text edit mode
	 *
	 *  @param Event e - Event
	 *
	 * @private
	 */
	__exitEditMode : function(e){
		if(document.all)e = event;

		var obj = DHTMLSuite.commonObj.getSrcElement(e);	// Reference to element triggering the event.
		var elementId = obj.id.replace('input___','');

		var dataSource = this.elementsAssociative[elementId];

		var newValue;
		var valueToSendToAjax;
		if(dataSource.listModel){
			 newValue = obj.options[obj.options.selectedIndex].text;
			 valueToSendToAjax = obj.options[obj.options.selectedIndex].value;
		}else{
			newValue = obj.value;
			valueToSendToAjax = newValue;
		}
		if(e.keyCode && e.keyCode==27)newValue = document.getElementById(dataSource.elementId).innerHTML;
		if(newValue && newValue!=document.getElementById(dataSource.elementId).innerHTML)this.__sendRequest(dataSource.elementId,valueToSendToAjax);	// Send ajax request when changes has been made.
		document.getElementById(dataSource.elementId).innerHTML = newValue;

		document.getElementById(dataSource.elementId).style.display='';
		obj.style.display='none';
		if(dataSource.labelId)this.__setLabelClassName(document.getElementById(dataSource.labelId),'inactive');
	}
	// }}}
	,
	// {{{ __sendRequest()
	/**
	 *	Send textEdit changes to the server
	 *
	 *  @param String elementId - Id of changed element
	 *  @param String value - Value of changed element
	 *
	 * @private
	 */
	__sendRequest : function(elementId,value){
		var index = DHTMLSuite.variableStorage.ajaxObjects.length;
		var ind = this.objectIndex;
		try{
			DHTMLSuite.variableStorage.ajaxObjects[index] = new sack();
		}catch(e){	// Unable to create ajax object - send alert message and return from sort method.
			alert('Unable to create ajax object. Please make sure that the sack js file is included on your page');
			return;
		}

		var url;
		if(this.elementsAssociative[elementId].serverFile)url = this.elementsAssociative[elementId].serverFile; else url = this.serversideFile;

		DHTMLSuite.variableStorage.ajaxObjects[index].setVar('textEditElementId', elementId);
		DHTMLSuite.variableStorage.ajaxObjects[index].setVar('saveTextEdit', 1);
		DHTMLSuite.variableStorage.ajaxObjects[index].setVar('textEditValue', escape(value));

		DHTMLSuite.variableStorage.ajaxObjects[index].requestFile = url;	// Specifying which file to get
		DHTMLSuite.variableStorage.ajaxObjects[index].onCompletion = function(){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__handleServerSideResponse(index,url); };	// Specify function that will be executed after file has been found
		DHTMLSuite.variableStorage.ajaxObjects[index].onError = function(){ DHTMLSuite.variableStorage.arrayDSObjects[ind].__handleAjaxError(index,url); };	// Specify function that will be executed after file has been found
		DHTMLSuite.variableStorage.ajaxObjects[index].runAJAX();		// Execute AJAX function
	}
	// }}}
	,
	// {{{ __handleServerSideResponse()
	/**
	 *	Verify response from ajax.
	 *
	 *  @param Integer ajaxIndex - Index of used sack() object
	 *  @param String url - Failing url
	 *
	 * @private
	 */
	__handleServerSideResponse : function(ajaxIndex,url){
		if(DHTMLSuite.variableStorage.ajaxObjects[ajaxIndex].response!='OK'){
			alert('An error occured in the textEdit widget when calling the url\n' + url);
		}
		DHTMLSuite.variableStorage.ajaxObjects[ajaxIndex] = null;
	}
	// }}}
	,
	// {{{ __handleAjaxError()
	/**
	 *	Ajax request failed
	 *
	 *  @param Integer ajaxIndex - Index of used sack() object
	 *  @param String url - Failing url
	 *
	 * @private
	 */
	__handleAjaxError : function(ajaxIndex,url){
		alert('Error when calling the url:\n' + url);
		DHTMLSuite.variableStorage.ajaxObjects[ajaxIndex] = null;
	}

}

/*[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';
	}

}