// get the available screen width and height
if (window.innerWidth) {winwidth= window.innerWidth;}
      else if (document.body.offsetWidth) {winwidth=document.body.offsetWidth;}
	       else {winwidth=screen.availWidth;}

// initialize some variables		   
var tooltip, tipcss;
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "10pt";
var tipFontColor = "#0033aa";
var tipBgColor = "#ffffff"; 
var tipBorderColor = "#c9d9f9";
var tipBorderWidth = 5;
var tipBorderStyle = 'ridge';
var tipPadding = 0;
var standardbody ;
var screenMouseX, screenMouseY, docMouseX, docMouseY, XOffset, YOffset;
var loading = 0;



// CSS for popup-div
function initTip() {
	tooltip = document.getElementById('tipDiv') ;
	tipcss = tooltip.style;
	    tipcss.position = 'absolute';
		tipcss.fontFamily = tipFontFamily;
		tipcss.fontSize = tipFontSize;
		tipcss.color = tipFontColor;
		tipcss.backgroundColor = tipBgColor;
		tipcss.borderColor = tipBorderColor;
		tipcss.borderWidth = tipBorderWidth+"px";
		tipcss.padding = tipPadding+"px";
		tipcss.borderStyle = tipBorderStyle; 
		tipcss.zIndex=1100 ;
}



// **** on mouseover ****

function showInfo(evt, products_id) { 

        if (document.URL.indexOf('translate.google')!=-1 || document.URL.indexOf('http:') ==-1) return ;

     var new_mouseover = evt ;
	 

// get scroll-offset and mouse position
	 
	standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
	
	if (document.all) { XOffset = standardbody.scrollLeft ; 
                        YOffset	= standardbody.scrollTop ; 
					  } 
			     else { XOffset = window.pageXOffset ; 
				        YOffset = window.pageYOffset ;  
		         	  } 
					  
					  
        screenMouseX = evt.screenX ; screenMouseY = evt.screenY ; 
		docMouseX = evt.clientX ; docMouseY = evt.clientY ; 


// CSS for 'loading' - tooltip-div		
	    tooltip = document.getElementById('tipDiv') ;
	    tipcss = tooltip.style;
		loading=1;
		tipcss.position = 'absolute';
		tipcss.left = docMouseX + XOffset -50 +'px'; 
		tipcss.width = 120+'px' ;
		tooltip.innerHTML = 'Please Wait<br>Info is Loading' ; 
		tipcss.top = docMouseY + YOffset -50 +'px';
		tipcss.color = '#003399' ;
		tipcss.backgroundColor = '#ffffd0';
		tipcss.borderWidth = '2px';
		tipcss.borderColor = tipBorderColor;
		tipcss.padding = '4px';
		t1=setTimeout("tipcss.visibility='visible'",0);
		

if (products_id!='') {


//  AJAX request
		
	var ajaxRequest;  
	
	try{
		// Opera, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	
    var queryString = '?products_id=' + products_id ;
	ajaxRequest.open("GET", "product_info_ajax.php" + queryString, true);
	ajaxRequest.send(null); 			  
	

	ajaxRequest.onreadystatechange = function () { 

	if (ajaxRequest.readyState == 4)   {
	
	// process and display AJAX response

	initTip();
	info = ajaxRequest.responseText.split('||') ;
	var img_width = info[1].split('|')[0] ;
	var img_height = info[1].split('|')[1] ;
		if (img_height>img_width*1.1) { 
	         img_height0=+img_height; img_height=img_width*1.1; img_width=Math.round(img_width*img_height/img_height0);
			 }
	var tipWidth = +img_width; 
	var tipHeight = +img_height + 2*(tipBorderWidth + tipPadding)  +150 ;

	var tip = '<table border="0" cellpadding="0" cellspacing="0"><tr><td><img src="'+info[0]+'" width="'+img_width+'" height="'+img_height+'" border="0"></td></tr><tr><td valign="middle" align="center">'+'<span style="font-family:'+tipFontFamily+'; font-size:'+tipFontSize +'; color:'+tipFontColor + ';">'+info[2]+'</span>'+'</td></tr></table>'; 
	
	tooltip.innerHTML = tip; 
	loading=0;
	tipcss.width = tipWidth+'px';

 if ( ( screenMouseX < winwidth - tipWidth -50 ) || ( screenMouseY > tipHeight +150) ) { 
                              XPos = winwidth - tipWidth -15 - 2*(tipBorderWidth + tipPadding) + XOffset ;  XPos=XPos-20;
                                    YPos = YOffset ;
					                } 
			                  else {  XPos =  XOffset ; XPos=XPos+20;
				                      YPos =  YOffset ;   
	            		           } 
						  
	tipcss.left= XPos + 'px'; 
	tipcss.top = YPos + 'px'; 
	t1=setTimeout("tipcss.visibility='visible'",0);
	new_mouseover = false ;
		}
		
	}		
	
 }
 
 
 
 
}				  



// **** on mouseout ****
function hideInfo() {
	if (!tooltip) return;
	if (loading==0)  { 
	       t2=setTimeout("tipcss.visibility='hidden'",0);
	       tooltip.innerHTML = '' ; }
}

   


 function reload_window() { 
	 
	   firefox=-1; msie7=-1;
       if (navigator.userAgent) { firefox=navigator.userAgent.search(/Firefox/); msie7=navigator.userAgent.search(/MSIE 7/); } 
	   if (firefox==-1 && msie7==-1) { window.location.reload(); }
	      else { 
		      if (navigator.cookieEnabled) {
                 if ( document.cookie.indexOf('resize=') ==-1 ) {
                  alert('For best display, please reload the page after resizing your window');  
                  today = new Date();
                  expiry = new Date(today.getTime() + 24*60*60*1000);   // cookie expires after 1 day
                  document.cookie='resize=yes; expires='+expiry.toGMTString()+'; path=/'; 
				 }
			  }
			  else { alert('Please reload this page'); }
				
          }
		  
 }
 
window.onresize=reload_window;

document.write('<div id="tipDiv" style="position:absolute; top:10px; left:10px; visibility:hidden; z-index:100" onmouseover="hideInfo()"></div>');