function ShowProductDetail(ID,e)
{  
    
    HideElement(GetProductDetailArrow());  
    
    GS_Ajax.CancelAjaxRequest(); 
    document.Mouse = getMouseXY(e); 
   
  
  
  
    HideProductDetail();
    
    ShowProductDetailElement(document.Mouse);
        
    document.body.onmouseup = function(){    
         
            ConnectMouseDown();
    };
   
 
   
   

    var URL = '/CommerceProcessor/Pages/Products/ProductDetail_V2.aspx?Product=' + ID;
    GS_Ajax.GetAsyncRequest(URL,AjaxCallBack);  

}

function AjaxCallBack()
{
 
    if(GS_Ajax.RequestIsReady())
    {
        //Make sure that we get a sucess page status   
    if(GS_Ajax.RequestIsSuccessfull())
    {
        //change our location
        // document.getElementById(ControlName).innerHTML = reqXML.responseText;
        // New just replace in sub element on demand       
        // alert('OnTreeLoaded');
         
        var s = GS_Ajax.responseText();            
        var c = GetProductDetailContainer(); 


        var p1 =  s.indexOf('<table');
        var p2 = s.lastIndexOf('>',s.lastIndexOf('<table')) + 1;
        s = s.substring(p1,p2); 

        c.innerHTML = s;

        HideElement(GetProductDetailWait());  
        ShowElement(GetProductDetailContainer());
        ShowElement(GetProductDetailArrow());  
    }else{
       
    }
    }
    
}

function GetProductDetailWait()
{
    return document.getElementById('Product_Details_Wait');
}

function GetProductDetailContainer()
{
    return document.getElementById('Product_Details_Container');
}

function GetProductDetail()
{
    return document.getElementById('Product_Details');
}

function GetProductDetailArrow()
{
    return document.getElementById('Product_Details_Arrow');
}
function IsChild (OutterElement,SelectedElement) {
  
        while (SelectedElement!=null) 
        {   
         if(OutterElement==SelectedElement){
            return true;
        }
             SelectedElement = SelectedElement.offsetParent;
        }
    return false;
}

function HideByBodyMouseDown(e){
    if ( document.DetailVisible==true){
        var d = GetProductDetail(); 
         var srcEl;
         
         try
         {
                if (window.event!=null) 
                {
                  // var  e = window.event; 
                   srcEl = event.srcElement; //? e.srcelement : e.target; 
                }else{
//                  alert(e );
//                  alert(e.target);
//                   alert(window.target);
                    srcEl = e.target; 
                } 
        
         }
         catch(ee)
         {
         
            srcEl = e.target; 
         }

         
    
        if (IsChild(d,srcEl)==false){
            HideProductDetail();
        }
    }
}

function ConnectMouseDown(){
    document.body.onmouseup = null;
    document.body.onmousedown = function(e){ 
         
        HideByBodyMouseDown(e);
    }
    
}

    
    
function HideProductDetail()
{
    var d =  GetProductDetail(); 
    HideElement(GetProductDetailArrow());
    HideElement(d);
   
    document.body.onmousedown = null; 
    document.body.onmouseup = null; 
    document.DetailVisible=false;
}
 
function HideElement(d)
{  
    d.style.visibility='hidden'; 
    d.style.display='none';   
   
}

function ShowElement(d)
{
  
    d.style.visibility='visible'; 
    d.style.display='inline';    
}

function ShowProductDetailElement(pt)
{

    var d = GetProductDetail(); 
    var orgPt = { x: pt.x, y: ( pt.y - 22) };
    var scroll =  document.body.clientHeight + document.body.scrollTop;
     
   if (pt.y + 325 > scroll  )
   {
       pt.y=pt.y - ((pt.y + 325)-scroll);
   }
       
    HideElement(GetProductDetailContainer());  
    ShowElement(GetProductDetailWait());
    
   
    if (pt.y<0)
   {
       pt.y=0;
   }
   
   pt.x = pt.x + 30; 
   
//   
    pt.x = pt.x + 20;   
    d.style.ZIndex = 99; 
    d.style.position   = "absolute";
    d.style.top        = (pt.y - 25 ) + 'px';
    d.style.left       = pt.x + 'px';  
    ShowElement(d);  
    
    d = GetProductDetailArrow();
    
    d.style.ZIndex = 99; 
    d.style.position   = "absolute";
    d.style.top        = orgPt.y + 'px';
    d.style.left       = pt.x-21 + 'px';  
    
    
   
    document.DetailVisible=true;
}


function getMouseXY(e) {
//    var c = { x: 0, y: 0 };
////    alert('document.all');
////    var IE = document.all?true:false;
////  
////    if (e) { // grab the x-y pos.s if browser is IE
////       
////    c.x = event.clientX + document.body.scrollLeft;
////    c.y = event.clientY + document.body.scrollTop;
////    } else {  // grab the x-y pos.s if browser is NS
////        
////    c.x = e.pageX;
////    c.y  = e.pageY;
////    }  
// 
////alert(BrowserDetect.browser);  
//var bType = BrowserDetect.browser;
//switch (bType)
//{
//case 'Explorer':
//    c.x = event.clientX + document.body.scrollLeft;
//    c.y = event.clientY + document.body.scrollTop;
//break;
//case 'Firefox':
////alert(event);
////    c.x = e.clientX;
////    c.y = e.clientY;
//   //c = getRelativeCoordinates(event, e);
//    c = getAbsolutePosition(e);
//break;
//default:
//    c.x = e.pageX;
//    c.y = e.pageY;
//}

//  
//   c = getAbsolutePosition(e);
//  

//  return c
  return getAbsolutePosition(e);
}


   
  
   function getAbsolutePosition(element) {
    var r = { x: element.offsetLeft, y: element.offsetTop };
    if (element.offsetParent) {
      var tmp = getAbsolutePosition(element.offsetParent);
      r.x += tmp.x;
      r.y += tmp.y;
    }
    return r;
  }