// JavaScript Document
// example of call: <a id="me" href="javascript:grayOut(true,'me',0,'Default',100,true);">Example</a>
// example 2 of call: <a id="me" href="javascript:grayOut(true,'me',0,'Default',true,false,true,100);">Example</a>

var pdata = [];

function grayOut(vis, parentID, dataID, templateID, heightAdjustment, printFeature, positionFixed, heightAdjustmentFixed) {
  var options = options || {}; 
  var zindex = options.zindex || 50;
  var opacity = options.opacity || 50;
  var opaque = (opacity / 100);
  var bgcolor = options.bgcolor || '#000000';
  var dark=document.getElementById('darkenScreenObject');
  if (!dark) {
    var tbody = document.getElementsByTagName("body")[0];
    var tnode = document.createElement('div');           
        tnode.style.position='absolute';                 
        tnode.style.top='0px';                           
        tnode.style.left='0px';                          
        tnode.style.overflow='hidden';                   
        tnode.style.display='none';                      
        tnode.id='darkenScreenObject';                   
    tbody.appendChild(tnode);                            
    dark=document.getElementById('darkenScreenObject');  
  }
  if (vis) {
    if( document.body && ( document.body.scrollWidth || document.body.scrollHeight ) ) {
        var pageWidth = document.body.scrollWidth+'px';
        var pageHeight = document.body.scrollHeight+'px';
    } else if( document.body.offsetWidth ) {
      var pageWidth = document.body.offsetWidth+'px';
      var pageHeight = document.body.offsetHeight+'px';
    } else {
       var pageWidth='100%';
       var pageHeight='100%';
    }   
    dark.style.opacity=opaque;                      
    dark.style.MozOpacity=opaque;                   
    dark.style.filter='progid:DXImageTransform.Microsoft.Alpha(Opacity='+opacity+')'; 
    dark.style.zIndex=zindex;        
    dark.style.backgroundColor=bgcolor;  
    dark.style.width= pageWidth;
    dark.style.height= pageHeight;
    dark.style.display='block';
	var loadBoxTop = 0;
	var left = (pageWidth / 2) - 200;
	var pbody = document.getElementsByTagName("body")[0];
    var pnode = document.createElement('div');
	if(positionFixed) {
		pnode.style.position= 'fixed';
	  if(heightAdjustmentFixed) {
		loadBoxTop = heightAdjustmentFixed;
		pnode.style.top= heightAdjustmentFixed + 'px';   
	  }else{
		loadBoxTop = elementPosition(document.getElementById(parentID), heightAdjustment);
		pnode.style.top= loadBoxTop+'px';   
	  }
	} else {
		pnode.style.position= 'absolute';                 
	  if(heightAdjustmentFixed) {
		loadBoxTop = heightAdjustmentFixed;
		pnode.style.top= heightAdjustmentFixed + 'px';   
	  }else{
		loadBoxTop = elementPosition(document.getElementById(parentID), heightAdjustment);
		pnode.style.top= loadBoxTop+'px';   
	  }
	}                      
        pnode.style.left= '0px';                        
		pnode.style.width= pageWidth;
    	pnode.style.height= '200px';
		pnode.style.color= 'black';
		pnode.style.zIndex=zindex + 10;         
		pnode.align='center';
        pnode.id='loadBox';
	pbody.appendChild(pnode);                       
	document.getElementById("loadBox").innerHTML= layout(printFeature);  
	document.getElementById("contentAreaInsert").innerHTML= template(dataID, templateID);
	if(positionFixed){
		var curtopFixed = loadBoxTop;
		var trueTop = 0;
		if(window.pageYOffset){
			trueTop = window.pageYOffset;
		} else if(document.all) {
			var iebody=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body;
			var dsoctop=document.all? iebody.scrollTop : pageYOffset;
			trueTop = dsoctop;
		}
		trueTop = Number(trueTop) + Number(curtopFixed);
		document.getElementById("loadBox").style.position= 'absolute';
		document.getElementById("loadBox").style.top= trueTop+'px';
	}
  } else {
	if(document.getElementById("locatorFrame")){
		window.location.reload();
	}
    dark.style.display='none';
	var pbody = document.getElementsByTagName("body")[0];
  	var pnode = document.getElementById('loadBox');
  	pbody.removeChild(pnode);
  }
}
function elementPosition(obj, heightAdjustment) {
  var curtop = 0;
  if (obj.offsetParent) {
	curtop = obj.offsetTop;
	while (obj = obj.offsetParent) {
	  curtop += obj.offsetTop;
	}
  }
  if (!heightAdjustment){
	  heightAdjustment = 100;
  }
  if (heightAdjustment == true){ 
  	return 100;
  } else {
  	return curtop - heightAdjustment;
  }
}
function CallPrint(){
	var prtContent = document.getElementById('contentAreaInsert');
	var WinPrint =
	window.open('','','left=0,top=0,width=1,height=1,t oolbar=0,scrollbars=0,status=0');
	WinPrint.document.open();
	WinPrint.document.write('<style type="text/css">p,ul,li,a,td,th {font-family: Arial, Helvetica, sans-serif;font-size: 11px;color: #000000;} h1,h2,h3 {font-family: Arial, Helvetica, sans-serif;color: #000000;}</style>'+prtContent.innerHTML);
	WinPrint.document.close();
	WinPrint.focus();
	setTimeout(PrintDelay(WinPrint, prtContent),15000);
}
function PrintDelay(WinPrint, prtContent){
	WinPrint.print();
	WinPrint.close();
	prtContent.innerHTML=strOldOne;
}
function layout(printFeature) {
  if(printFeature){
    var popup = '<table width="662" border="0" cellspacing="0" cellpadding="0"><tr><td><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="580" height="30" background="/site/template/images/popup_box_03.gif" align="right"><a href="#" onClick="CallPrint();" style="color: black;"><img border="0" src="/site/template/images/printer.jpg"/></a></td><td><A HREF="javascript:grayOut(false);"><img src="/site/template/images/popup_box_04.gif" width="82" border="0" height="30" alt="" /></A></td></tr></table></td></tr><tr><td id="contentAreaInsert" background="/site/template/images/popup_box_06.gif" style="color: black; padding: 11px; text-align: left;">&nbsp;</td></tr><tr><td><img src="/site/template/images/popup_box_07.gif" width="662" height="26" /></td></tr></table>';
  } else {
	var popup = '<table width="662" border="0" cellspacing="0" cellpadding="0"><tr><td><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="580" height="30" background="/site/template/images/popup_box_03.gif" align="right"> </td><td><A HREF="javascript:grayOut(false);"><img src="/site/template/images/popup_box_04.gif" width="82" border="0" height="30" alt="" /></A></td></tr></table></td></tr><tr><td id="contentAreaInsert" background="/site/template/images/popup_box_06.gif" style="color: black; padding: 11px; text-align: left;">&nbsp;</td></tr><tr><td><img src="/site/template/images/popup_box_07.gif" width="662" height="26" /></td></tr></table>';
  }
  return popup;
}
function template(dataID, templateID) {
  var template = "";
  switch(templateID){
	  case "Product":
	  	template= '<table width="640" border="0" cellspacing="0" cellpadding="0"><tr><td colspan="2"><table width="640" border="0" cellspacing="0" cellpadding="0"><tr><td><h2 style="padding-top: 0; margin-top: 0;">'+ pdata[dataID][0] +'<br/><img src="'+ pdata[dataID][3] +'" align="bottom"/></h2></td><td><div align="right"><table><tr><td style="padding:5px; padding-top: 0;" valign="bottom" align="center"><a href="./?ct=51&&pt='+ pdata[dataID][9] +'&pl='+ pdata[dataID][8] +'" style="color: black;"><img border="0" src="/site/template/images/gallery.jpg"/><br/>Photo Gallery</a></td><td style="padding:5px; padding-top: 0;" valign="bottom" align="center"><a href="./?ct=54" style="color: black;"><img border="0" src="'+ pdata[dataID][6] +'"/><br/>See what fits your truck!</a></td></tr></table></div></td></tr></table></td></tr><tr><td colspan="2" align="center">&nbsp;</td></tr><tr><td colspan="2">'+ pdata[dataID][5] +' '+ pdata[dataID][1] +'</td></tr><tr><td colspan="2" align="center">&nbsp;</td></tr><tr><td colspan="2" align="center"><img src="'+ pdata[dataID][4] +'"/></td></tr><tr><td width="320" valign="top"><div style="padding:5px; padding-left: 15px;">'+ pdata[dataID][2] +'</div></td><td width="320" valign="top"><div style="padding:5px; padding-left: 15px;">'+ pdata[dataID][7] +'</div></td></tr></table>';
		break
	  case "Image":
	  	template= '<center><img src="'+ pdata[dataID] +'"/></center>';
		break
	  case "Image2":
	  	template= '<h2>' + pdata[dataID][1] + '</h2><center><img src="'+ pdata[dataID][0] +'"/></center>';
		break
	  case "ImageDesc":
	  	template= '<table width="640" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="'+ pdata[dataID][0] +'"/></td></tr><tr><td><div style="padding:5px;">'+ pdata[dataID][1] +'</div></td></tr></table>';
		break
	  case "ImageDescTitle":
	  	template= '<h2>' + pdata[dataID][2] + '</h2><table width="640" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="'+ pdata[dataID][0] +'"/></td></tr><tr><td><div style="padding:5px;">'+ pdata[dataID][1] +'</div></td></tr></table>';
		break
	  default:
	  	template = pdata[dataID];
  }
  return template;
}