function getClientWidth() {
  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
}

function getClientHeight() {
  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}

function getBodyScrollTop() {
  return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
}

function getBodyScrollLeft() {
  return self.pageXOffset || (document.documentElement && document.documentElement.scrollLeft) || (document.body && document.body.scrollLeft);
}

function addEvent(elm, evType, fn, useCapture) {
	if (elm.addEventListener) {
    	elm.addEventListener(evType, fn, useCapture);
		return true;
	} else if (elm.attachEvent) {
		var r = elm.attachEvent('on' + evType, fn);
		return r;
    } else {
		elm['on' + evType] = fn;
	}
}

var div = document.createElement('DIV');
div.style.position = 'absolute';
div.id = 'details';

var top_v = 0;
var valign = '';

var removed;

function showDetails(id, obj, direct) {
	div.innerHTML = '';
	document.body.appendChild(div);
	var v = document.createElement('DIV');
	v.style.position = 'absolute';
	v.style.width = '45px';
	v.style.height = '35px';
	v.innerHTML = ' ';
	v.id = 'v';
	if(direct=='l') {
		v.style.right = '21px';
	} else if (direct=='r') {
		v.style.left = '0px';
	}
	removed = false;
	var req = new JsHttpRequest();
	req.onreadystatechange = function() {
		if (req.readyState == 4) {
			div.innerHTML = req.responseText;
			setPos(obj, div, direct);
			v.style.top = top_v+'px';
			v.style.background = 'url(images/reward_type/datails_'+direct+'_'+valign+'.gif) no-repeat';
			div.appendChild(v); 
		}
	}
	req.open('POST', 'content/details_vsp_'+direct+'.php', true);
	req.send({q: id});
}

function hideDetails() {
	div.innerHTML = '';
	if(!removed && document.getElementById('details')) {
		document.body.removeChild(div);
		div.style.top = '-1000px';
		div.style.left = '-1000px';
		removed = true;
	}
}

function getBounds(element) {
	var left = element.offsetLeft;
	var top = element.offsetTop;
	for (var parent = element.offsetParent; parent; parent = parent.offsetParent) {
    	left += parent.offsetLeft;
    	top += parent.offsetTop;
	}
	return {left: left, top: top, width: element.offsetWidth, height: element.offsetHeight};
}

function setPos(obj, obj2, direct) {
	var cords = getBounds(obj);
	var x = cords.left;
	var top = cords.top;
	var docHeight = getClientHeight();
	var docHeight_1_2 = docHeight/2;  
	var objCords = getBounds(obj2);
	var objHeight = objCords.height;
	var objHeight_1_2 = objHeight/2;
	var topwscrl = top - getBodyScrollTop();       
	var y = (topwscrl<docHeight_1_2 && topwscrl+objHeight<docHeight)?((direct!='b')?top-40:top-115):((topwscrl>docHeight_1_2 && topwscrl-objHeight>0)?top-objHeight+50:top-objHeight_1_2);
	top_v = (y==top-40)?50:((y==top-objHeight+50)?objHeight-55:objHeight_1_2);
	switch(top_v) {
		case 50:
		valign = 't';
		break;
		case (objHeight-55):
		valign = 'b';
		break;
		case objHeight_1_2:
		valign = 'c';
		break;
	}
	ifleft = (direct=='l')?-550:0;
	div.style.top = y+'px';
	div.style.left = x+cords.width+10+ifleft+'px';
}

function showCard(num, src, obj) {
	div.innerHTML = '';
	setPos(obj, div, 'b');
	document.body.appendChild(div);
	removed = false;
	var req = new JsHttpRequest();
	req.onreadystatechange = function() {
		if (req.readyState == 4) {
			div.innerHTML = req.responseText;
		}
	}
	req.open('POST', 'content/best_cred.php', true);
	req.send({q: num, p: src});
}