function CSSManager(){
	var _self = this;
	var _elements = new Object();
	var _properties = new Object();
	var _currentElement= "text";
	var _currentClassName = null;
	var _currentProperty = null;
	var _lastToolkitStyle = null;
	var _editOption = "add";
	var _siteCSSChanged = false;	
	var _siteColors = new Object();
	var _siteColorFunction = null;
	
	setDefaultCSS();
	setDefaultProperties();
	function setDefaultCSS(){
		_elements["text"] =  new Object();		
		_elements["text"]["standard"] = getDefaultText("Regular Text");
		createCSS("text","standard");		
	}
	function getId(element){
		var cssID = "css_" + Math.ceil(Math.random() * 10000);
		if(_elements[element][cssID] == undefined) return cssID;
		else return getId(element);
	}
	function getDefaultText(className){
		return createText(className,"11","normal","normal","none","#000000","Trebuchet MS");
	}
	function createText(className,textSize,bold,italics,underline,textColor,textFont){
		var text =  new Object();	
		text ["name"] = className;	
		text ["textSize"] = textSize;
		text ["bold"] = bold;
		text ["italics"] = italics;
		text ["underline"] = underline;
		text ["textColor"] = textColor;
		text ["textFont"] = textFont;
		return text ;
	}
	function setDefaultProperties(){
		var textProps = new Object();
		textProps["textProperties"] = "Text Properties";
		textProps["textColor"] = "Text Color"
		_properties["text"] =  textProps;
	}	
	this.openCssEditor = function(element){
		_toolkit.setOption("css");
		var editor = document.getElementById("cssEditor_div");
		_utilities.displayCover();
		_utilities.centerObject(editor);
		editor.style.display = "block";
		_self.selectElement(element);
	}
	this.closeCssEditor = function(){
		document.getElementById("cssEditor_div").style.display = "none";
		_utilities.hideCover();
		returnToToolkit();
		_toolkit.setOption("normal");
	}	
	this.addNewStyle = function(element){
		switch(element){
			case"text": _self.openCssEditor(element);_self.addNewClass("add"); break;
			default: break;
		}
	}
	this.addNewClass = function(option){
		_editOption = option;
		var classPrompt = document.getElementById("addClassPrompt_div");
		classPrompt.style.display = "block";		
		_utilities.centerObject(classPrompt);	
		var input = document.getElementById("addClassPrompt_input")
		if(_editOption == "add") input.value = "";
		else input.value = _elements[_currentElement][_currentClassName]["name"];
		input.focus();
	}
	this.closeEditPrompt =function(){
		document.getElementById("addClassPrompt_div").style.display = "none";
	}
	this.editClassName = function(className){		
		if(_editOption=="add"){
			var cssId = getId(_currentElement);
			_elements[_currentElement][cssId] = getDefaultText(className);
			createCSS(_currentElement,cssId);
			displayClassNames(_currentElement);
			_self.selectClass(cssId);
		}else{
			_elements[_currentElement][_currentClassName]["name"] = className;
			displayClassNames(_currentElement);
			_self.selectClass(_currentClassName);
		}	
		_elementsMenu.setClassNames(_currentElement);		
		_siteCSSChanged = true;
		_self.closeEditPrompt();		
	}
	this.deleteCssClass = function(){
		if(_currentClassName!="standard"){
			if(confirm("Delete class: " + _elements[_currentElement][_currentClassName]["name"] + "?"))
			delete _elements[_currentElement][_currentClassName];
			var classElement = document.getElementById(_currentClassName+"_"+_currentElement);
			if(classElement!=null)classElement.parentNode.removeChild(classElement)
			displayClassNames(_currentElement);
			_self.selectClass("standard");
			_elementsMenu.setClassNames(_currentElement);
			_siteCSSChanged = true;
		}else{
			alert("Cannot delete the default class for this element.");
		}
	}
	this.selectElement = function(element){	
		var div = document.getElementById(element+"_cssEditor_div");
		if(div != undefined){
			if(_currentElement!=null){
					var lastDiv = document.getElementById(_currentElement+"_cssEditor_div");
					if(lastDiv!=undefined){
						lastDiv.className="cssOption";
						lastDiv.onmouseout =function(){this.className="cssOption";};
					}
			}
			div.className = "cssOption_hover";
			div.onmouseout ="";
			_currentElement = element;
			displayProperties(element)
			displayClassNames(element)
			switch(element){
				case "text": _currentProperty = "textProperties";_self.selectClass("standard"); break;
				default: break;
			}
		}			
	}
	function displayProperties(element){
		var props = "";
		for(eachProperty in _properties[element]){
			props+='<div id="'+eachProperty+'_cssEditor_div" onclick="_cssManager.selectProperty(\''+eachProperty+'\')" class="cssOption" style="width:125;"  onmouseover="this.className=\'cssOption_hover\'" onmouseout="this.className=\'cssOption\'">'+_properties[element][eachProperty]+"</div>"
		}
		document.getElementById("classPropertiessHolder_div").innerHTML = props;
	}
	function displayClassNames(element){
		var newNames = "";
		for(eachClass in _elements[element]){
			newNames+='<div id='+eachClass+"_"+_currentElement+"_css_div"+' class="cssOption" style="width:135;" onclick="_cssManager.selectClass(\''+eachClass+'\')" onmouseover="this.className=\'cssOption_hover\'" onmouseout="this.className=\'cssOption\'">'+_elements[element][eachClass]["name"]+"</div>"
		}
		document.getElementById("classNamesHolder_div").innerHTML = newNames;
	}
	this.editClass = function(element,cssId){
		_self.openCssEditor(element);
		_self.selectClass(cssId);
	}
	this.selectClass = function(cssId){
		var div = document.getElementById(cssId+"_"+_currentElement+"_css_div");
		if(div!=undefined){
			if(_currentClassName!=null){
				var lastDiv = document.getElementById(_currentClassName+"_"+_currentElement+"_css_div");
				if(lastDiv!=undefined){
					lastDiv.className="cssOption";
					lastDiv.onmouseout =function(){this.className="cssOption";};
				}
			}
			div.className = "cssOption_hover";
			div.onmouseout ="";
			_currentClassName =cssId;
			_self.displayCSS(_currentElement,cssId);
			_self.selectProperty(_currentProperty);
			displayTitle();
		}
	}
	function displayTitle(){
		var title="Current Style:    ";
		switch(_currentElement){
			case"text": title+=" TEXT - " + _elements[_currentElement][_currentClassName]["name"];break;
			default: break;
		}
		document.getElementById("css_current_style_div").innerHTML = title;
	}
	this.selectProperty = function(property){
		var div = document.getElementById(property+"_cssEditor_div");
		if(div!=undefined){
			if(_currentProperty!=null){
				var lastDiv = document.getElementById(_currentProperty+"_cssEditor_div");
				lastDiv.className="cssOption";
				lastDiv.onmouseout =function(){this.className="cssOption";};
			}
			div.className = "cssOption_hover";
			div.onmouseout ="";
			_currentProperty =property;
			_self.displayProperty(property);
		}
		
	}
	this.displayProperty = function(property){
		var holder = document.getElementById("cssEditorChangeStyle_div");
		var div =  document.getElementById(property+"_movableDiv");		
		if(div!=undefined && div!=null){			
				returnToToolkit();
				setToolkitProperties(property);
				_lastToolkitStyle = property;
				holder.innerHTML = "";
				holder.appendChild(div);
				div.style.display="block";	
			}					
	}
	function setToolkitProperties(property){		
			var css = _elements[_currentElement][_currentClassName];
			switch(property){
				case "textProperties": _toolkit.displayTextProperties(css["textFont"],css["textSize"],css["bold"],css["underline"],css["italics"]); break;
				case "textColor": _toolkit.setCurrentTextColor(css["textColor"]); break;				
				default:break;
			}		
	}
	function returnToToolkit(){
		if(_lastToolkitStyle != null){
			var div = document.getElementById(_lastToolkitStyle+"_movableDiv");			
			if(div!=undefined && div!=null){
				var holder = document.getElementById(_lastToolkitStyle+"_toolbox_holderDiv");
				holder.appendChild(div);
			}			
		}
	}
	this.displayCSS =function(element,cssId){
		document.getElementById("cssDescription_div").className=cssId+"_"+element;
	}
	function returnCSSString(css,value){
		var cssString= "";
		switch(css){
			case"textSize": cssString="font-size: " + value+"pt;"; break;
			case"bold": cssString="font-weight: " + value+";"; break;
			case"italics": cssString="font-style: " + value+";"; break;
			case"underline": cssString="text-decoration: " + value+";"; break;
			case"textColor": cssString= 'color: ' + value+';'; break;
			case"textFont": cssString='font-family: ' + value+";"; break;
			default: break;
		}
		return cssString;
	}
	this.getElementClasses = function(element){return _elements[element];}
	this.getElementCSS = function(element,cssId){	return _elements[element][cssId];}
	function createCSS(element,cssId){
		var props = _elements[element][cssId];
		var css =  "div."+cssId+"_"+element+"{";
		for(eachProp in props){
			var value = returnCSSString(eachProp,props[eachProp])
			if(value!="")css+= value;
		}		
		css+="}";
		addCss(cssId+"_"+element,css);		
	}
	function addCss(cssId, cssCode) {
		var oldElement = document.getElementById(cssId);
		if(oldElement!=null)oldElement.parentNode.removeChild(oldElement)		
		var styleElement = document.createElement("style");
		styleElement.type = "text/css";
		styleElement.id = cssId;
		if (styleElement.styleSheet) {
		    styleElement.styleSheet.cssText = cssCode;
		} else {
		    styleElement.appendChild(document.createTextNode(cssCode));
		}
		document.getElementsByTagName("head")[0].appendChild(styleElement);
	}
	this.changeTextColor = function(color){
		_elements[_currentElement][_currentClassName]["textColor"]=color;
		_self.displayCSS(_currentElement,_currentClassName);
		createCSS(_currentElement,_currentClassName);
		_siteCSSChanged = true;
	}
	this.setText = function(textFont,textSize,bold,underline,italics){
		var props = _elements[_currentElement][_currentClassName];
		props["textFont"] = textFont;
		if(textSize!=""&&textSize!=undefined&&textSize!="undefined")props["textSize"] = textSize;
		props["bold"] = bold;
		props["underline"] = underline;
		props["italics"] = italics;
		_self.displayCSS(_currentElement,_currentClassName);
		createCSS(_currentElement,_currentClassName);
		_siteCSSChanged = true;
	}
	this.saveCSS = function(option){
		if(_siteCSSChanged){
			var css = _self.CSSToXML();
			if(option=="community"){_ajax.ajaxCall_process("SaveTemplateCSS",css,"pageId=" + _pageInfo['pageId'],"_cssManager.saveCSS_response");}
			else{_ajax.ajaxCall_process("SaveWebsiteCSS",css,"pageId=" + _pageInfo['pageId']+"&websiteID="+ _pageInfo['projId'],"_cssManager.saveCSS_response");}
			_siteCSSChanged=false;
		}
	}
	this.saveCSS_response = function(response){
		//alert("css resp" + response);
	}
	this.CSSToXML = function(){
		var css = "";
		for(eachElement in _elements){
				var element = _elements[eachElement];
				var elementCSS = "<css_elem><type>"+eachElement+"</type>";
				for(eachClass in element){
					var className = element[eachClass];
					elementCSS += "<class><id>"+eachClass+"</id>";
					for(eachProp in className){
						elementCSS+= xmlTag(eachProp,className[eachProp])
					}
					elementCSS += "</class>";
				}
				elementCSS +="</css_elem>";
				css += elementCSS;
		}
		css+=colorsToXML();
		return css;
	}		
	function xmlTag(tagName,tagData){
		if(tagData==undefined)tagData = "";
		return "<" + tagName +">" + tagData + "</" + tagName + ">"}
	
	this.loadText = function(cssId,className,textSize,bold,italics,underline,textColor,textFont){
		_elements["text"][cssId] = createText(className,textSize,bold,italics,underline,textColor,textFont);
		createCSS("text",cssId);
	}
	this.editTemplate = function(){
		var templateId = _pageInfo['template'];
		if(templateId != "" && templateId != "undefined" && templateId != undefined){
			window.open('/EditWebsitePage?pageID='+templateId,'_blank')	
		}else{alert("There is no template attached to this page.")}				
	}
	
	/* ------ Site colors ----- */
	this.addSiteColor = function(color){
		if(_siteColors[color]==undefined) _siteColors[color] = 1;
		else _siteColors[color]++;
		_siteCSSChanged=true;
	}	
	this.removeMyColor = function(color){
		delete _siteColors[color];
		createColorTable();
		_siteCSSChanged= true;
	}
	function colorsToXML(){
		var xml="";
		for(eachColor in _siteColors){xml+=eachColor+","+_siteColors[eachColor]+"|"}
		return "<siteColors>"+xml+"</siteColors>";
	}
	function sortByNumUsed (a, b) {
	    var x = parseInt(a.numUsed);
	    var y = parseInt(b.numUsed);
	    return ((x > y) ? -1 : ((x < y) ? 1 : 0));
	}
	function sortColors(){
		colorArray = new Array();
		var i = 0;
		for(eachColor in _siteColors){	colorArray[i] = {color:eachColor, numUsed:_siteColors[eachColor]};i++;}
		colorArray.sort(sortByNumUsed);
		return colorArray;
	}
	function createColorTable(){
		var colors = sortColors();
		var colorsDiv = document.getElementById("myColorsHolder_div");
			var html = '<table width="150px"  class="editorRegularText">';
			for(i=0; i<colors.length;i++){
				html+='<tr><td style="width:22px" onclick="_cssManager.useMyColor(\''+colors[i].color+'\')"><div style="position:relative;height:20;width:20; border:1px solid #888888; background:'+colors[i].color+';"/></td>';
				html+='<td style="width:100px" onclick="_cssManager.useMyColor(\''+colors[i].color+'\')">'+colors[i].color+'</td>';
				html+='<td style="width:20px"><img onclick="_cssManager.removeMyColor(\''+colors[i].color+'\')" src="work/WebsiteEditor/Images/toolkit/cancel.png" title="Remove from my colors."/></td></tr>';
			}
			html+="</table>"
			colorsDiv.innerHTML = html;
	}
	this.displayMyColors = function(holderDiv, colorFunciton){
		_siteColorFunction= colorFunciton;
		var div = document.getElementById("myColors_div");
		var holder = document.getElementById(holderDiv);
		if(holder!=undefined){
			holder.appendChild(div);
			div.style.display= "block";
			createColorTable();
		}
	}
	this.useMyColor = function(color){
		switch(_siteColorFunction){
			case "bg" : _toolkit.changeBGColor(color);break;
			case "border": _toolkit.setBorderColor(color);break;
			case "text": _toolkit.setTextColor(color);break;		
			case "corner": _toolkit.setCornerColor(color);break;	
			default:break;
		}
	}
	this.loadSiteColors = function(siteColors){
		var colors = siteColors.split("|");
		for(i=0; i<colors.length; i++){
				var colorProps = colors[i].split(",");
				if(colorProps[1]!=undefined){
				_siteColors[colorProps[0]]=colorProps[1];
			}
		}
	}
}