// ***** Variables *************************************************************

var popup_dragging = false;
var popup_target;
var popup_mouseX;
var popup_mouseY;
var popup_mouseposX;
var popup_mouseposY;
var popup_oldfunction;
var popup_blackout;
var margincont;

// ***** popup_mousedown *******************************************************

function popup_mousedown(e)
{
  var ie = navigator.appName == "Microsoft Internet Explorer";

  popup_mouseposX = ie ? window.event.clientX : e.clientX;
  popup_mouseposY = ie ? window.event.clientY : e.clientY;
}


// ***** popup_mousedown_window ************************************************

function popup_mousedown_window(e)
{
  var ie = navigator.appName == "Microsoft Internet Explorer";

  if ( ie && window.event.button != 1) return;
  if (!ie && e.button            != 0) return;

  popup_dragging = true;
  popup_target   = this['target'];
  popup_mouseX   = ie ? window.event.clientX : e.clientX;
  popup_mouseY   = ie ? window.event.clientY : e.clientY;

  if (ie)
       popup_oldfunction = document.onselectstart;
  else popup_oldfunction = document.onmousedown;

  if (ie)
       document.onselectstart = new Function("return false;");
  else document.onmousedown   = new Function("return false;");
}


// ***** popup_mousemove *******************************************************

function popup_mousemove(e)
{
  var ie      = navigator.appName == "Microsoft Internet Explorer";
  var element = document.getElementById(popup_target);
  var mouseX  = ie ? window.event.clientX : e.clientX;
  var mouseY  = ie ? window.event.clientY : e.clientY;

  if (!popup_dragging) return;

  element.style.left = (element.offsetLeft+mouseX-popup_mouseX)+'px';
  element.style.top  = (element.offsetTop +mouseY-popup_mouseY)+'px';

  popup_mouseX = ie ? window.event.clientX : e.clientX;
  popup_mouseY = ie ? window.event.clientY : e.clientY;
}

// ***** popup_mouseup *********************************************************

function popup_mouseup(e)
{
  var ie      = navigator.appName == "Microsoft Internet Explorer";
  var element = document.getElementById(popup_target);

  if (!popup_dragging) return;

  popup_dragging = false;

  if (ie)
       document.onselectstart = popup_oldfunction;
  else document.onmousedown   = popup_oldfunction;
}

// ***** popup_exit ************************************************************

function popup_exit(e)
{
  var ie      = navigator.appName == "Microsoft Internet Explorer";
  var element = document.getElementById(popup_target);
  
  popup_mouseup(e);
  
  element.style.display = 'none';
  if(popup_blackout != ''){
     var blackout = document.getElementById(popup_blackout);
     blackout.style.display = 'none';
  }
}

function getDim (id) {  
// document.getElementById(id).style.height="auto";
// match box models
if (document.all) {
gh = document.getElementById(id).offsetWidth+10;
}
else {
gh = document.getElementById(id).offsetWidth;
}
alert (gh)
}


function getScrollingPosition() 
{ 
 var position = [0, 0]; 

 if (typeof window.pageYOffset != 'undefined') 
 { 
   position = [ 
       window.pageXOffset, 
       window.pageYOffset 
   ]; 
 } 

 else if (typeof document.documentElement.scrollTop 
     != 'undefined' && document.documentElement.scrollTop > 0) 
 { 
   position = [ 
       document.documentElement.scrollLeft, 
       document.documentElement.scrollTop 
   ]; 
 } 

 else if (typeof document.body.scrollTop != 'undefined') 
 { 
   position = [ 
       document.body.scrollLeft, 
       document.body.scrollTop 
   ]; 
 } 

 return position; 
}


// ***** popup_show ************************************************************

function popup_show(id, drag_id, exit_id,position, x, y, blackout_id)
{
  
  var width        = window.innerWidth  ? window.innerWidth  : document.body.clientWidth;
  var height       = window.innerHeight ? window.innerHeight : document.body.clientHeight;
  var element      = document.getElementById(id);
  var widthEle     = document.getElementById('container').style.widthOffset;
  var widthPadding = document.getElementById('container').style.marginLeft;
  var drag_element = document.getElementById(drag_id);
  var exit_element = document.getElementById(exit_id);



 

 if(blackout_id != null){
        popup_blackout = blackout_id;
        var blackout = document.getElementById(blackout_id);
	blackout.style.width = width;
	blackout.style.height = height;
        blackout.style.position = "absolute";
        blackout.style.display  = "block";

        blackout.style.top = document.documentElement.scrollTop;
        blackout.style.left = document.documentElement.scrollLeft;

 	window.onresize = function(){
	    blackout.style.width = window.innerWidth  ? window.innerWidth  : document.body.clientWidth;;
	    blackout.style.height = window.innerHeight ? window.innerHeight : document.body.clientHeight;
	       if((document.documentElement.scrollTop+(height-element.clientHeight)/2+y)>50){
		  element.style.top  = (document.documentElement.scrollTop+(height-element.clientHeight)/2+y)+'px';   
   		}else{
        	  element.style.top  = (document.documentElement.scrollTop+50)+'px';  
   		}

	}

	//window.onscroll = function(){
            //element.style.left = (document.documentElement.scrollLeft+(width-element.clientWidth)/2+x)+'px';
            //element.style.left = '80px';
            //element.style.top  = (document.documentElement.scrollTop+(height-element.clientHeight)/2+y)+'px';
            //blackout.style.width = window.innerWidth  ? window.innerWidth  : document.body.clientWidth;;

            //  blackout.style.top = document.documentElement.scrollTop;
            //  blackout.style.left = document.documentElement.scrollLeft;   
	    //alert(document.documentElement.scrollTop);
	//}

	window.onscroll = function() 
	{ 
 		var scrollpos = getScrollingPosition(); 
 		//document.title = 'left=' + scrollpos[0] + ' top=' + scrollpos[1]; 
		blackout.style.top = scrollpos[1]+'px';
		blackout.style.left = scrollpos[0]+'px'; 
	};
	     
  }
   
  
  element.style.position = "absolute";
  element.style.display  = "block";

  if (position == "element" || position == "element-right" || position == "element-bottom")
  {
    var position_element = document.getElementById(position_id);

    for (var p = position_element; p; p = p.offsetParent)
      if (p.style.position != 'absolute')
      {
        x += p.offsetLeft;
        y += p.offsetTop;
      }

    if (position == "element-right" ) x += position_element.clientWidth;
    if (position == "element-bottom") y += position_element.clientHeight;

    element.style.left = x+'px';
    element.style.top  = y+'px';
  }

  if (position == "mouse")
  {
    element.style.left = (document.documentElement.scrollLeft+popup_mouseposX+x)+'px';
    element.style.top  = (document.documentElement.scrollTop +popup_mouseposY+y)+'px';
  }

  if (position == "screen-top-left")
  {
    element.style.left = (document.documentElement.scrollLeft+x)+'px';
    element.style.top  = (document.documentElement.scrollTop +y)+'px';
  }

  if (position == "screen-center")
  {
   //element.style.left = (document.documentElement.scrollLeft+(width-element.clientWidth)/2+x)+'px';
   element.style.left = '80px';
   if((document.documentElement.scrollTop+(height-element.clientHeight)/2+y)>50){
	element.style.top  = (document.documentElement.scrollTop+(height-element.clientHeight)/2+y)+'px';   
   }else{
        element.style.top  = (document.documentElement.scrollTop+50)+'px';  
   }
   
  }

  if (position == "screen-bottom-right")
  {
    element.style.left = (document.documentElement.scrollLeft+(width-element.clientWidth )  +x)+'px';
    element.style.top  = (document.documentElement.scrollTop +(height-element.clientHeight)  +y)+'px';
  }

  drag_element['target']   = id;
  drag_element.onmousedown = popup_mousedown_window;

  exit_element.onclick     = popup_exit;
}


// ***** Attach Events *********************************************************

if (navigator.appName == "Microsoft Internet Explorer")
     document.attachEvent   ('onmousedown', popup_mousedown);
else document.addEventListener('mousedown', popup_mousedown, false);

if (navigator.appName == "Microsoft Internet Explorer")
     document.attachEvent   ('onmousemove', popup_mousemove);
else document.addEventListener('mousemove', popup_mousemove, false);

if (navigator.appName == "Microsoft Internet Explorer")
     document.attachEvent   ('onmouseup', popup_mouseup);
else document.addEventListener('mouseup', popup_mouseup, false);