var midX = '';
var midY = '';
var posx = '';
var posy = '';
var scrx = '';
var scry = '';

var ext = ( window.XMLHttpRequest )? '.png' : '.gif' ;// IE 7, mozilla, safari, opera 9

function showBalloon(e, id_em ){

    midX = getSize()[0] / 2;
    midY = getSize()[1] / 2;
    posx = getPos(e)[0];
    posy = getPos(e)[1];
    scrx = getScrollXY()[0];
    scry = getScrollXY()[1];

    var posrx = posx - scrx;
    var posry = posy - scry;

    if(midX < posrx){
        var tipRight = true;
        posx = posx - ( 376 - 35 * 2);
    }else{
	    posx = posx - 35;
    }
    if(midY < posry){
        var tipBottom = true;
       posy = posy - (165 + 70 * 2);
    }else{
	   posy = posy + 5;
    }
	
	if( tipRight ){

		if( tipBottom ){

		    document.getElementById('imgtop'+id_em).src = 'tmp/todowebcams/img/info_lightbox_top' + ext;
		    document.getElementById('imgbottom'+id_em).src = 'tmp/todowebcams/img/info_lightbox_bottom_right' + ext;

		}else{

		    document.getElementById('imgtop'+id_em).src = 'tmp/todowebcams/img/info_lightbox_top_right' + ext;
		    document.getElementById('imgbottom'+id_em).src = 'tmp/todowebcams/img/info_lightbox_bottom' + ext;

		}

	}else{

		if( tipBottom ){

		    document.getElementById('imgtop'+id_em).src = 'tmp/todowebcams/img/info_lightbox_top' + ext;
		    document.getElementById('imgbottom'+id_em).src = 'tmp/todowebcams/img/info_lightbox_bottom_left' + ext;

		}else{

		    document.getElementById('imgtop'+id_em).src = 'tmp/todowebcams/img/info_lightbox_top_left' + ext;
		    document.getElementById('imgbottom'+id_em).src = 'tmp/todowebcams/img/info_lightbox_bottom' + ext;

		}

	}

	document.getElementById('balloon'+id_em).style.position = 'absolute';
	document.getElementById('balloon'+id_em).style.zIndex = 9999;
	document.getElementById('balloon'+id_em).style.width = 375;
	document.getElementById('balloon'+id_em).style.left = posx+'px';
	document.getElementById('balloon'+id_em).style.top = posy+'px';

	document.getElementById('balloon'+id_em).style.display = 'block';

}

function closeBalloon( id_em ){
	if( document.getElementById( 'balloon' + id_em ) )
		document.getElementById( 'balloon' + id_em ).style.display = 'none';
}

function overBalloon( id_em ){

		document.getElementById( 'balloon' + id_em ).style.display = 'block';

}

function getPos(e) {

	var posx = 0;
	var posy = 0;
	if (!e) var e = window.event;

	if (e.pageX || e.pageY) 	{

		posx = e.pageX;
		posy = e.pageY;

	}else if (e.clientX || e.clientY) 	{

		posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;

		posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;

	}
	return [posx, posy];
}

function getSize() {

  var myWidth = 0, myHeight = 0;

  if( typeof( window.innerWidth ) == 'number' ) {//	No-IE

    myWidth = window.innerWidth;
    myHeight = window.innerHeight;

  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode'

    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;

  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {//IE 4 compatible


    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;

  }
  return [myWidth, myHeight];
}

function getScrollXY() {

  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {//Netscape compliant

    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;

  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {//DOM compliant

    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;

  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {   //IE6 standards compliant mode

    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;

  }

  return [ scrOfX, scrOfY ];
}