var higlightElementStoredValuesArray = {};
var highlighted
var moveMode = 'smooth';
var storedHighlightStyle = {};

function highlightElement(blockElement, highlightStyle) {
	if (!highlightStyle) {
		highlightStyle='default';
	}
	if (blockElement) {
		var ie7=IsIE7PlusBrowser() && !IsIE8Browser();
		// in IE7 this approach does not work
		if (highlightStyle=='LB' && !ie7) {
			// get data
			bodyTag = document.getElementsByTagName('body')[0];
			blockElementPosition = findPos(blockElement);
			// create surrounding divs
			divTopLeft = document.createElement('div');
			setHightlightDivStyle(divTopLeft, 0, 0, blockElementPosition[0], blockElementPosition[1]);
			divTopLeft.setAttribute('class', 'SurroundDiv '+highlightStyle+'-TopLeft');
			divTopLeft.setAttribute('className', 'SurroundDiv '+highlightStyle+'-TopLeft');
			bodyTag.appendChild(divTopLeft);
			
			divTopCenter = document.createElement('div');
			setHightlightDivStyle(divTopCenter, blockElementPosition[0], 0, blockElement.offsetWidth, blockElementPosition[1]);
			divTopCenter.setAttribute('class', 'SurroundDiv '+highlightStyle+'-TopCenter');
			divTopCenter.setAttribute('className', 'SurroundDiv '+highlightStyle+'-TopCenter');
			bodyTag.appendChild(divTopCenter);
			
			divTopRight = document.createElement('div');
			setHightlightDivStyle(divTopRight, blockElementPosition[0]+blockElement.offsetWidth, 0, bodyTag.offsetWidth-blockElementPosition[0]-blockElement.offsetWidth, blockElementPosition[1]);
			divTopRight.setAttribute('class', 'SurroundDiv '+highlightStyle+'-TopRight');
			divTopRight.setAttribute('className', 'SurroundDiv '+highlightStyle+'-TopRight');
			bodyTag.appendChild(divTopRight);

			divMiddleLeft = document.createElement('div');
			setHightlightDivStyle(divMiddleLeft, 0, blockElementPosition[1], blockElementPosition[0], blockElement.offsetHeight);
			divMiddleLeft.setAttribute('class', 'SurroundDiv '+highlightStyle+'-MiddleLeft');
			divMiddleLeft.setAttribute('className', 'SurroundDiv '+highlightStyle+'-MiddleLeft');
			bodyTag.appendChild(divMiddleLeft);
			
			divMiddleRight = document.createElement('div');
			setHightlightDivStyle(divMiddleRight, blockElementPosition[0]+blockElement.offsetWidth, blockElementPosition[1], bodyTag.offsetWidth-blockElementPosition[0]-blockElement.offsetWidth, blockElement.offsetHeight);
			divMiddleRight.setAttribute('class', 'SurroundDiv '+highlightStyle+'-MiddleRight');
			divMiddleRight.setAttribute('className', 'SurroundDiv '+highlightStyle+'-MiddleRight');
			bodyTag.appendChild(divMiddleRight);
			
			divBottomLeft = document.createElement('div');
			setHightlightDivStyle(divBottomLeft, 0, blockElementPosition[1]+blockElement.offsetHeight, blockElementPosition[0], bodyTag.offsetHeight-blockElementPosition[1]-blockElement.offsetHeight);
			divBottomLeft.setAttribute('class', 'SurroundDiv '+highlightStyle+'-BottomLeft');
			divBottomLeft.setAttribute('className', 'SurroundDiv '+highlightStyle+'-BottomLeft');
			bodyTag.appendChild(divBottomLeft);
			
			divBottomCenter = document.createElement('div');
			setHightlightDivStyle(divBottomCenter, blockElementPosition[0], blockElementPosition[1]+blockElement.offsetHeight, blockElement.offsetWidth, bodyTag.offsetHeight-blockElementPosition[1]-blockElement.offsetHeight);
			divBottomCenter.setAttribute('class', 'SurroundDiv '+highlightStyle+'-BottomCenter');
			divBottomCenter.setAttribute('className', 'SurroundDiv '+highlightStyle+'-BottomCenter');
			bodyTag.appendChild(divBottomCenter);
			
			divBottomRight = document.createElement('div');
			setHightlightDivStyle(divBottomRight, blockElementPosition[0]+blockElement.offsetWidth, blockElementPosition[1]+blockElement.offsetHeight, bodyTag.offsetWidth-blockElementPosition[0]-blockElement.offsetWidth, bodyTag.offsetHeight-blockElementPosition[1]-blockElement.offsetHeight);
			divBottomRight.setAttribute('class', 'SurroundDiv '+highlightStyle+'-BottomRight');
			divBottomRight.setAttribute('className', 'SurroundDiv '+highlightStyle+'-BottomRight');
			bodyTag.appendChild(divBottomRight);
			
			
			storedHighlightStyle[blockElement] = {};
			storedHighlightStyle[blockElement]['style'] = 'LB';
			storedHighlightStyle[blockElement]['surroundDiv'] = {};
			storedHighlightStyle[blockElement]['surroundDiv']['divTopLeft'] = divTopLeft;
			storedHighlightStyle[blockElement]['surroundDiv']['divTopCenter'] = divTopCenter;
			storedHighlightStyle[blockElement]['surroundDiv']['divTopRight'] = divTopRight;
			storedHighlightStyle[blockElement]['surroundDiv']['divMiddleLeft'] = divMiddleLeft;
			storedHighlightStyle[blockElement]['surroundDiv']['divMiddleRight'] = divMiddleRight;
			storedHighlightStyle[blockElement]['surroundDiv']['divBottomLeft'] = divBottomLeft;
			storedHighlightStyle[blockElement]['surroundDiv']['divBottomCenter'] = divBottomCenter;
			storedHighlightStyle[blockElement]['surroundDiv']['divBottomRight'] = divBottomRight;
			
		} else {
			/*blockElement.style.background = '#F0F0F0';
			blockElement.style.opacity = '0.6';
			blockElement.style.filter = 'alpha(opacity=60)';*/
			storedHighlightStyle[blockElement] = 'default';
		}
	}
}

function highlightElementById(blockElementId, highlightStyle) {
	blockElement = document.getElementById(blockElementId);
	return highlightElement(blockElement, highlightStyle);
}


function setHightlightDivStyle(highlightDiv, leftPos, topPos, width, height) {
	if (highlightDiv) {
		highlightDiv.style.display = 'block';
		highlightDiv.style.position = 'absolute';
		highlightDiv.style.left = leftPos + 'px';
		highlightDiv.style.top = topPos + 'px';
		highlightDiv.style.width = width + 'px';
		highlightDiv.style.height = height + 'px';
		highlightDiv.style.zIndex = '951';
		highlightDiv.setAttribute('onclick', 'closeLastContextMenu(event); deactivateContextMenu();');
	}
}

function unhighlightElement(blockElement) {
	if (storedHighlightStyle[blockElement] && storedHighlightStyle[blockElement]['style']) {
		highlightStyle=storedHighlightStyle[blockElement]['style'];
	} else {
		highlightStyle='default';
	}
	if (blockElement) {
		bodyTag = document.getElementsByTagName('body')[0];
		var ie7=IsIE7PlusBrowser() && !IsIE8Browser();
		// in IE7 this approach does not work
		if (highlightStyle=='LB' && !ie7) {
			for (x in storedHighlightStyle[blockElement]['surroundDiv']) {
				if (storedHighlightStyle[blockElement]['surroundDiv'][x]) {
					bodyTag.removeChild(storedHighlightStyle[blockElement]['surroundDiv'][x]);				
					storedHighlightStyle[blockElement]['surroundDiv'][x] = null;
				}
			}
		} else {
			/*blockElement.style.background = '';
			blockElement.style.opacity = '1';
			blockElement.style.filter = 'alpha(opacity=100)';*/
		}
	}
}

function unhighlightElementById(blockElementId, highlightStyle) {
	blockElement = document.getElementById(blockElementId);
	return unhighlightElement(blockElement, highlightStyle);
}

function popupElement(elementId) {
	targetElement = document.getElementById(elementId);
	if (targetElement) {
		showUnderlayer();
		
		// store old values
		higlightElementStoredValuesArray[elementId] = new Array();
		higlightElementStoredValuesArray[elementId]['left'] = getStyle(targetElement, 'left');
		higlightElementStoredValuesArray[elementId]['top'] = getStyle(targetElement, 'top');
		higlightElementStoredValuesArray[elementId]['position'] = getStyle(targetElement, 'position');
		higlightElementStoredValuesArray[elementId]['display'] = getStyle(targetElement, 'display');
		higlightElementStoredValuesArray[elementId]['z-index'] = getStyle(targetElement, 'z-index');
		higlightElementStoredValuesArray[elementId]['width'] = getStyle(targetElement, 'width');
		higlightElementStoredValuesArray[elementId]['height'] = getStyle(targetElement, 'height');
		
		// make fake element to store previous element position
		oldPosition = findPos(targetElement);
		higlightElementStoredValuesArray[elementId]['absPosLeft'] = oldPosition[0];
		higlightElementStoredValuesArray[elementId]['absPosTop'] = oldPosition[1];
		oId = generateGuid();
		newElement = document.createElement('div');
		newElement.setAttribute('id', oId);
		newElement.style.position = higlightElementStoredValuesArray[elementId]['position'];
		newElement.style.display = higlightElementStoredValuesArray[elementId]['display'];
		newElement.style.zIndex = higlightElementStoredValuesArray[elementId]['z-index'];
		newElement.style.width = higlightElementStoredValuesArray[elementId]['width'];
		newElement.style.height = higlightElementStoredValuesArray[elementId]['height'];
		newElement.style.background = '#999999';
		
		targetElement.parentNode.insertBefore(newElement, targetElement);
		higlightElementStoredValuesArray[elementId]['storedPositionId'] = oId;
		
		// move element to the body to allow full screen positioning
		wrapId = generateGuid();
		wrapDiv = document.createElement('div');
		wrapDiv.setAttribute('class', 'AjaxPopupWindow');
		wrapDiv.setAttribute('className', 'AjaxPopupWindow');
		wrapDiv.style.position = 'absolute';
		wrapDiv.style.display = 'block';
		wrapDiv.style.zIndex = '1050';
		wrapDiv.style.width = higlightElementStoredValuesArray[elementId]['width'];
		wrapDiv.style.height = higlightElementStoredValuesArray[elementId]['height'];
		wrapDiv.style.left = oldPosition[0] + 'px';
		wrapDiv.style.top = oldPosition[1] + 'px';
		wrapDiv.setAttribute('id', wrapId);
		wrapDiv.appendChild(targetElement);
		
		bodyTag = document.getElementsByTagName('body')[0];
		bodyTag.appendChild(wrapDiv);

		// add close button
		closeButton = document.createElement('span');
		closeButton.setAttribute('class', 'CloseAjaxPopup');
		closeButton.setAttribute('className', 'CloseAjaxPopup');
		closeButton.innerHTML = '<a href="#" onclick="return !closePopupElement(\'' + wrapId + '\', \'' + elementId + '\')"></a></span>';
		wrapDiv.insertBefore(closeButton, targetElement);
		
		placeElementOnCenter(wrapId);
	}
}

function placeElementOnCenter(elementId) {
	targetElement = document.getElementById(elementId);
	if (targetElement) {
		bodyArray = document.getElementsByTagName('body');
		bodyTag = bodyArray[0];

		screenScrollTop = document.body.scrollTop + document.documentElement.scrollTop;
		screenScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;
		
		currentLeft = targetElement.offsetLeft;
		currentTop = targetElement.offsetTop;
		calculatedLeft = ((getViewportSize())[0] - targetElement.offsetWidth) / 2 + screenScrollLeft;
		calculatedTop = ((getViewportSize())[1] - targetElement.offsetHeight) / 2 + screenScrollTop;
		if (moveMode && moveMode=='smooth') {
			smoothMove(targetElement, currentLeft, currentTop, calculatedLeft, calculatedTop, 20, 1);
		} else {
			directMove(targetElement, calculatedLeft, calculatedTop);
		}
	}
}

function directMove(targetElement, finalLeft, finalTop) {
	if (targetElement) {
			targetElement.style.left = finalLeft + 'px'; 
			targetElement.style.top = finalTop + 'px';
	}
}

function smoothMove(targetElement, startLeft, startTop, finalLeft, finalTop, noOfSteps, delay, currentStep) {
	if (currentStep==null) {
		currentStep = 0;
	}
	if (targetElement) {
			targetElement.style.left = targetElement.offsetLeft + (finalLeft - startLeft)/noOfSteps + 'px'; 
			targetElement.style.top = targetElement.offsetTop + (finalTop - startTop)/noOfSteps + 'px';
	}
	if (noOfSteps>currentStep) {
		setTimeout(function() {smoothMove(targetElement, startLeft, startTop, finalLeft, finalTop, noOfSteps, delay, currentStep+1)}, delay);
	}
}

function closePopupElement(windowId, elementId) {
	popupWindow = document.getElementById(windowId);
	if (popupWindow && higlightElementStoredValuesArray[elementId]) {
		targetElement = document.getElementById(elementId);
		storedPlace = document.getElementById(higlightElementStoredValuesArray[elementId]['storedPositionId']);
		
		// move element
		if (moveMode && moveMode=='smooth') {
			smoothMove(popupWindow, popupWindow.offsetLeft, popupWindow.offsetTop, higlightElementStoredValuesArray[elementId]['absPosLeft'], higlightElementStoredValuesArray[elementId]['absPosTop'], 20, 1);
		} else {
			directMove(popupWindow, higlightElementStoredValuesArray[elementId]['absPosLeft'], higlightElementStoredValuesArray[elementId]['absPosTop']);
		}
		// place to the old content
		storedPlace.parentNode.insertBefore(targetElement, storedPlace);
		storedPlace.parentNode.removeChild(storedPlace);
		
		// destroy window
		bodyTag = document.getElementsByTagName('body')[0];
		bodyTag.removeChild(popupWindow);
		
		// clean data
		higlightElementStoredValuesArray[elementId] = null;
		
		hideUnderlayer();
	}
	return true;
}