CSS.prototype.constructor = Utils;

function CSS() {
}

CSS.allowedClasses = new Array();

CSS.addStyles = function(event) {
	CSS.addBodyStyles();
	CSS.addInputStyles();
	CSS.addImageStyles();
	CSS.addOverStyles('leftSidebar');
	CSS.openContent();
}

CSS.addElementStyles = function(allowedStyles, allowedTag, allowedID, guideClass, callback) {
	var elements = null
	if (allowedTag != null) {
		elements = new Array();
		for ( var index = 0; index != allowedTag.length; index++) {
			var children = (allowedID != null ? window.document.getElementById(allowedID).getElementsByTagName(allowedTag[index]) : window.document.getElementsByTagName(allowedTag[index]));
			for ( var child = 0; child != children.length; child++) {
				elements.push(children[child]);
			}
		}
	}
	else if (allowedID != null) {
		elements = window.document.getElementById(allowedID).childNodes;
	}

	for ( var i = 0; i != elements.length; i++) {
		var content = elements[i];
		var hasClass = false;
		eval('hasClass = (content.className != null ? (" " + content.className + " ").match(' + '/ ' + allowedStyles.join(' | ') + ' /g' + ') : false);');

		if (content.className != null && content.alt != "processed" && hasClass && content.style.display != 'none') {
			var imageSize = null;
			var image = null;
			if (content.tagName == 'IMG') {
				var imageSize = new Image();
				imageSize.src = content.src;
			}

			var container = window.document.createElement('div');
			container.className = content.className;
			container.alt = "processed";

			var backgroundTop = window.document.createElement('div');
			backgroundTop.className = guideClass + 'TopBackground';
			container.appendChild(backgroundTop);

			var backgroundTopLeft = window.document.createElement('div');
			backgroundTopLeft.className = guideClass + 'TLBackground ' + container.className + 'TL';
			image = window.document.createElement('img');
			image.src = Config.appConfig.urlBase + 'images/global/frame/' + guideClass + '/corner_tl.png';
			backgroundTopLeft.appendChild(image);
			backgroundTop.appendChild(backgroundTopLeft);

			var backgroundTopMiddle = window.document.createElement('div');
			backgroundTopMiddle.className = guideClass + 'TMBackground ' + container.className + 'TM';
			backgroundTop.appendChild(backgroundTopMiddle);

			var backgroundTopRight = window.document.createElement('div');
			backgroundTopRight.className = guideClass + 'TRBackground ' + container.className + 'TB';
			image = window.document.createElement('img');
			image.src = Config.appConfig.urlBase + 'images/global/frame/' + guideClass + '/corner_tr.png';
			backgroundTopRight.appendChild(image);
			backgroundTop.appendChild(backgroundTopRight);

			content.className = guideClass + 'Content';
			content.style.zIndex = 999;
			content.style.position = 'relative';
			content.parentNode.replaceChild(container, content);
			container.appendChild(content);

			var backgroundBottom = window.document.createElement('div');
			backgroundBottom.className = guideClass + 'BottomBackground';
			container.appendChild(backgroundBottom);

			var backgroundBottomLeft = window.document.createElement('div');
			backgroundBottomLeft.className = guideClass + 'BLBackground ' + container.className + 'BL';
			image = window.document.createElement('img');
			image.src = Config.appConfig.urlBase + 'images/global/frame/' + guideClass + '/corner_bl.png';
			backgroundBottomLeft.appendChild(image);
			backgroundBottom.appendChild(backgroundBottomLeft);

			var backgroundBottomMiddle = window.document.createElement('div');
			backgroundBottomMiddle.className = guideClass + 'BMBackground ' + container.className + 'BM';
			backgroundBottom.appendChild(backgroundBottomMiddle);

			var backgroundBottomRight = window.document.createElement('div');
			backgroundBottomRight.className = guideClass + 'BRBackground ' + container.className + 'BR';
			image = window.document.createElement('img');
			image.src = Config.appConfig.urlBase + 'images/global/frame/' + guideClass + '/corner_br.png';
			backgroundBottomRight.appendChild(image);
			backgroundBottom.appendChild(backgroundBottomRight);

			if (callback != null) {
				callback(content, container, imageSize, backgroundTopMiddle, backgroundBottomMiddle);
			}

		}
	}
}

CSS.addImageStyles = function() {
	CSS.addElementStyles( [ 'framedImage' ], [ 'img' ], 'body', 'framedImage', function(content, container, imageSize, backgroundTopMiddle, backgroundBottomMiddle) {
		var width = Utils.normalizePixelValue(content.style.width);
		var height = Utils.normalizePixelValue(content.style.height);

		container.style.width = isNaN(width) ? (imageSize.width + 26) + 'px' : (width + 26) + 'px';
		container.style.height = isNaN(height) ? (imageSize.height + 26) + 'px' : (height + 26) + 'px';

		backgroundBottomMiddle.style.width = backgroundTopMiddle.style.width = isNaN(width) ? imageSize.width + 'px' : width + 'px';

		container.style.margin = '0px 10px 10px 0px';

		if (content.align != null && content.align != '') {
			container.style.cssFloat = content.align;
		}
	});
}

CSS.addDivStyles = function(divID) {
	CSS.addElementStyles( [ 'framedDiv' ], [ 'div' ], divID, 'framedDiv', function(content, container, imageSize, backgroundTopMiddle, backgroundBottomMiddle) {
		var width = Utils.normalizePixelValue(content.style.width);
		var height = Utils.normalizePixelValue(content.style.height);

		container.style.width = (width + 26) + 'px';
		container.style.height = (height + 26) + 'px';

		backgroundBottomMiddle.style.width = backgroundTopMiddle.style.width = width + 'px';

		// container.parentNode.style.padding = '0px 10px 10px 0px';
	});
}

CSS.addInputStyles = function() {
	CSS.addElementStyles( [ 'framedInput' ], [ 'input', 'textarea', 'select' ], 'body', 'framedInput', function(content, container, imageSize, backgroundTopMiddle, backgroundBottomMiddle) {
		var width = Utils.normalizePixelValue(content.style.width);
		var height = Utils.normalizePixelValue(content.style.height);

		container.style.width = (width + 16) + 'px';
		container.style.height = (height + 10) + 'px';

		backgroundBottomMiddle.style.width = backgroundTopMiddle.style.width = width + 'px';

	});

}

CSS.addBodyStyles = function() {
	CSS.addElementStyles( [ 'contentFull', 'contentWithSidebar', 'rightSidebar', 'leftSidebar' ], null, 'body', 'column', function(content, container, imageSize, backgroundTopMiddle, backgroundBottomMiddle) {
		var background = window.document.createElement('div');
		background.className = 'columnBackground';
		container.appendChild(background);
	});

}

CSS.addOverStyles = function(allowedID) {
	var allowedTag = window.document.getElementById(allowedID);
	if (allowedTag == null) {
		return;
	}
	var elements = allowedTag.getElementsByTagName('li');

	for ( var i = 0; i != elements.length; i++) {
		var content = elements[i];

		if (window.attachEvent) {
			content.attachEvent('onmouseover', CSS.overStyle);
			content.attachEvent('onmouseout', CSS.outStyle);
		}
		else {
			content.addEventListener('mouseover', CSS.overStyle, false);
			content.addEventListener('mouseout', CSS.outStyle, false);
		}
	}

}

CSS.overStyle = function(event) {
	var target = Utils.getEventTarget(event);
	if (target.tagName == 'A') {
		target = target.parentNode;
	}
	target.style.backgroundColor = '#E2ECED';
}

CSS.outStyle = function(event) {
	var target = Utils.getEventTarget(event);
	if (target.tagName == 'A') {
		target = target.parentNode;
	}
	target.style.backgroundColor = '#EFF5F5';
}

CSS.animationElement = null;
CSS.animationTimer = null;
CSS.openContent = function(elementID) {
	if (!elementID) {
		elementID = 'site';
	}

	var siteCSS = CSS.getCSSRule('site');

	var element = document.getElementById(elementID);
	element.style.width = '0px';
	element.style.overflow = 'hidden';
	element.style.visibility = 'visible';
	CSS.animationElement = element;
	CSS.animationTimer = setInterval('CSS.animate(' + siteCSS.style.width.replace(/px/, '') + ')', 10);
}

CSS.animate = function(width) {
	var currentWidth = Utils.normalizePixelValue(CSS.animationElement.style.width);
	if (currentWidth >= width) {
		clearInterval(CSS.animationTimer);
	}
	else {
		CSS.animationElement.style.width = (Utils.normalizePixelValue(CSS.animationElement.style.width) + 80) + 'px';
	}
}

CSS.getCSSRule = function(ruleName){
	for (var k = window.document.styleSheets.length - 1; k != -1; k--) {
		var rules = window.document.styleSheets.item(k);
		rules = rules.cssRules || rules.rules;

		for (var i = 0; i < rules.length; i++) {
			if (rules.item(i).selectorText && rules.item(i).selectorText.toLowerCase() == '.' + ruleName.toLowerCase()) {
				return rules.item(i);
			}
		}
	}
}

CSS.getCSSRules = function() {
	var rules = window.document.styleSheets.item(0);
	return rules.cssRules || rules.rules;
}