var bigPictureDiv = document.getElementById('bigPictureDiv');
var bigPictureImg = document.getElementById('bigPictureImg');
var magnifierDiv  = document.getElementById('magnifierDiv');
var magnifierImg  = document.getElementById('magnifierImg');
var carName       = document.getElementById('carName');

var globalFlag     = 0;
var globalCarId    = 0;
var globalPosition = new Array();
var globalBigFlag  = 0;

var xmlHttpRequest = false;
function loadImage(picId)
{
	if (!xmlHttpRequest) {
		if (window.XMLHttpRequest) {
			xmlHttpRequest = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			xmlHttpRequest = new ActiveXObject('Microsoft.XMLHTTP');
		}
	}

	if (xmlHttpRequest) {
		var url = '/pics/car_pics/big/' + picId + '.jpg';

		xmlHttpRequest.open('GET', url, true);
		xmlHttpRequest.onreadystatechange = function()
		{
			if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
				return displayImage(picId);
			}
		};
		xmlHttpRequest.send(null);
	}
}

function smartAddEvent(obj, evType, fn)
{
	if (obj.addEventListener) {
		obj.addEventListener(evType, fn, false);
		return true;
	} else if (obj.attachEvent) {
		var r = obj.attachEvent("on" + evType, fn);
		return r;
	} else {
		return false;
	}
}

function getPosition(posOf)
{
	var parentPos;

	var documentScroll = new Array();
		documentScroll['left'] = document.documentElement.scrollLeft;
		documentScroll['top']  = document.documentElement.scrollTop;

	var screenSize = new Array();
	if (navigator.appName.indexOf("Microsoft")!=-1) {
		screenSize['width']  = document.body.offsetWidth;
		screenSize['height'] = document.body.offsetHeight;
	} else {
		screenSize['width']  = window.innerWidth;
		screenSize['height'] = window.innerHeight;
	}

	screenSize['width']  += documentScroll['left'];
	screenSize['height'] += documentScroll['top'];

	var absPos = new Array();
		absPos['left'] = posOf.offsetLeft;
		absPos['top']  = posOf.offsetTop;

	var sizeOfPosElem = new Array();
		sizeOfPosElem['width']  = posOf.offsetWidth;
		sizeOfPosElem['height'] = posOf.offsetHeight;

	parentPos = posOf.offsetParent;
	while (parentPos != null) {
		absPos['left'] += (parentPos.offsetLeft);
		parentPos       = parentPos.offsetParent;
	}

	parentPos = posOf.offsetParent;
	while (parentPos != null) {
		absPos['top'] += (parentPos.offsetTop);
		parentPos      = parentPos.offsetParent;
	}

	absPos['left']          = (absPos['left'] < 0 ? 0 : absPos['left']);
	absPos['top']           = (absPos['top'] < 0 ? 0 : absPos['top']);
	absPos['screenWidth']   = screenSize['width'];
	absPos['screenHeight']  = screenSize['height'];
	absPos['scrollWidth']   = (documentScroll['left'] < 0 ? 0 : documentScroll['left']);
	absPos['scrollHeight']  = (documentScroll['top'] < 0 ? 0 : documentScroll['top']);

	return absPos;
}

function showMagnifier(hoverdElement, picId, myurl)
{
	if (myurl!=''){
		document.getElementById('bigPictureHref').href = myurl; 
	}

	if (picId != globalCarId) {
		globalBigFlag = 0;
		hideBigPicture();
	}
	globalFlag     = 1;
	globalCarId    = picId;
	globalPosition = getPosition(hoverdElement);

	magnifierDiv.style.display = 'block';
	magnifierDiv.style.left    = (globalPosition['left'] + 119) + 'px';
	magnifierDiv.style.top     = (globalPosition['top'] + 3) + 'px';

	smartAddEvent(magnifierImg, 'mouseover', showBigPicture);
	smartAddEvent(magnifierImg, 'mouseout', hideBigPicture);
}

function displayImage(picId)
{
	bigPictureImg.style.width  = '';
	bigPictureImg.style.height = '';
	bigPictureImg.src          = '/pics/car_pics/big/' + picId + '.jpg';
	//document.getElementById('bigPictureHref').href        = '#';//'kataloog?go=m' + picId;

	var carNameTemp            = document.getElementById('carName_' + picId);
	var carYearTemp            = document.getElementById('carYear_' + picId);
	carName.innerHTML          = '<a href="kataloog?go=m' + picId + '" style="text-decoration: none;">' + carNameTemp.innerHTML + '</a>&nbsp;' + carYearTemp.innerHTML;

}

function showBigPicture()
{
	bigPictureImg.style.width  = '50px';
	bigPictureImg.style.height = '50px';
	bigPictureImg.src          = '/img/loading.gif';

	if (globalCarId > 0) {
		globalFlag = 1;
		globalBigFlag = 1;
		bigPictureDiv.style.display = 'block';
		bigPictureDiv.style.left    = (globalPosition['left'] + 160) + 'px';
		if ((globalPosition['top'] + 300) <= globalPosition['screenHeight']) {
			bigPictureDiv.style.top     = (globalPosition['top'] - 2) + 'px';
		} else {
			bigPictureDiv.style.top     = (globalPosition['top'] - 150) + 'px';
		}

		loadImage(globalCarId);
	}
}

function hideBigPicture()
{
	globalFlag = 0;
	if (globalBigFlag == 0) {
		bigPictureDiv.style.display = 'none';
		setTimeout("hideMagnifier();", 200);
	}
}

function hideMagnifier()
{
	if (globalFlag == 0) {
		magnifierDiv.style.display  = 'none';
		globalBigFlag = 0;
		hideBigPicture();
	}
}