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

var pdata = [];

function grayOut(vis, parentID, dataID, templateID, heightAdjustment, printFeature) {
  var options = options || {}; 
  var zindex = options.zindex || 50;
  var opacity = options.opacity || 70;
  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+600+'px';
    } else if( document.body.offsetWidth ) {
      var pageWidth = document.body.offsetWidth+'px';
      var pageHeight = document.body.offsetHeight+600+'px';
    } else {
       var pageWidth='100%';
       var pageHeight='100%';
    }   
    dark.style.opacity=opaque;                      
    dark.style.MozOpacity=opaque;                   
    dark.style.filter='alpha(opacity='+opacity+')'; 
    dark.style.zIndex=zindex;        
    dark.style.backgroundColor=bgcolor;  
    dark.style.width= pageWidth;
    dark.style.height= pageHeight;
    dark.style.display='block';
	var left = (pageWidth / 2) - 200;
	var pbody = document.getElementsByTagName("body")[0];
    var pnode = document.createElement('div');
		pnode.style.position= 'absolute';                 
        pnode.style.top= elementPosition(document.getElementById(parentID), heightAdjustment)+'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);
  } else {
    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(prtContent.innerHTML);
	WinPrint.document.close();
	WinPrint.focus();
	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":
	  	if(pdata[dataID][6] == "hide"){
			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>'+ pdata[dataID][0] +'<br/><img src="'+ pdata[dataID][3] +'" align="bottom"/></h2></td><td><br/><div align="right"><table><tr><!--<td style="padding:5px;" valign="bottom" align="center"><a href="#" style="color: black;"><img border="0" src="/site/template/images/gallery.jpg"/><br/>Photo Gallery</a></td><td style="padding:5px;" valign="bottom" align="center"><a href="/Application" target="_blank" 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>';
		} else {
			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>'+ pdata[dataID][0] +'<br/><img src="'+ pdata[dataID][3] +'" align="bottom"/></h2></td><td><br/><div align="right"><table><tr><!--<td style="padding:5px;" valign="bottom" align="center"><a href="#" style="color: black;"><img border="0" src="/site/template/images/gallery.jpg"/><br/>Photo Gallery</a></td>--><td style="padding:5px;" valign="bottom" align="center"><a href="/Application" target="_blank" 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 "Product2":
	  	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>'+ pdata[dataID][0] +'<br/><img src="'+ pdata[dataID][3] +'" align="bottom"/></h2></td><td><br/><div align="right"><table><tr><!--<td style="padding:5px;" valign="bottom" align="center"><a href="#" style="color: black;"><img border="0" src="/site/template/images/gallery.jpg"/><br/>Photo Gallery</a></td>--><td style="padding:5px;" valign="bottom" align="center"><a href="/Application" target="_blank" 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="*"><div style="padding:5px; padding-left: 35px;">'+ pdata[dataID][2] +'</div></td><td width="75"> </td></tr></table>';
		break
	  case "Package":
	  	template= '<table width="640" border="0" cellspacing="0" cellpadding="0"><tr><td colspan="2"><h2>'+ pdata[dataID][0] +'</h2></td></tr><tr><td width="*"><div style="padding:5px;">'+ pdata[dataID][1] +'</div></td><td width="150"><img src="'+ pdata[dataID][2] +'"/></td></tr></table>';
		break
	  case "Video":
	  	template= '<table width="640" border="0" cellspacing="0" cellpadding="0"><tr><td><h2>'+ pdata[dataID][0] +'</h2></td></tr><tr><td style="text-align:center;">'+ pdata[dataID][1] +'</td></tr><tr><td><div style="padding:5px;">'+ pdata[dataID][2] +'</div></td></tr></table>';
		break
	  case "Video2":
	  	template= '<table width="640" border="0" cellspacing="0" cellpadding="0"><tr><td><h2>'+ pdata[dataID][0] +'</h2></td></tr><tr><td style="text-align:center;"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="640" height="405"><param name="movie" value="/site/template/flash/player.swf?VideoUrl='+ pdata[dataID][1] +'" /><param name="quality" value="high" /><embed src="/site/template/flash/player.swf?VideoUrl='+ pdata[dataID][1] +'" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="640" height="405"></embed></object></td></tr><tr><td><div style="padding:5px;">'+ pdata[dataID][2] +'</div></td></tr></table>';
		break
	  case "Image":
	  	template= '<center><img src="'+ pdata[dataID] +'"/></center>';
		break
	  case "Image2":
	  	template= '<h2>' + pdata[dataID][1] + '</h2><img src="'+ pdata[dataID][0] +'"/>';
		break
	  case "ImageDescTitle":
	  	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 "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 "OptionsPrint":
                var tdColor = '#ffffff';
                template= '<img vspace="3" src="template/images/century_logo.gif" align="left"/><br/><h2 style="margin-top: 0; padding-top: 0;">See what fits your truck.</h2><h3 style="margin-top: 0; padding-top: 0;">' + pdata[dataID][0][0] + '</h3><br clear="all"/>';
				if(pdata[dataID][0][1]){
					template = template + '<img src="' + pdata[dataID][0][1] + '" align="right"/>';
				}
				template = template + pdata[dataID][0][2]+'<br clear="all"/><div align="center"><table width="620" border="0" cellspacing="0" cellpadding="0"><tr><td><h3 style="margin: 0; padding: 0;">Options</h3></td><td><div align="right"><h3 style="margin: 0; padding: 0;">Your selected options are:</h3></div></td></tr></table><table width="620" border="0" cellspacing="0" cellpadding="0" style="border: 2px solid black;">';
                for(i=0;i<pdata[dataID][1].length;i++){
                        if(tdColor == '#ffffff'){
                                tdColor = '#ebebeb';
                        } else {
                                tdColor = '#ffffff';
                        }
                        template = template + '<tr><td bgcolor="' + tdColor + '"><div style="padding: 5px;"><strong>' +pdata[dataID][1][i][0] + '</strong></div></td><td bgcolor="' + tdColor + '"><div align="right" style="padding: 5px;"><strong>' + pdata[dataID][1][i][1] + '</strong></div></td></tr>';
                }
                template = template + '</table></div><div align="center"><div style="width: 620px; text-align: left;"><p>&nbsp;&nbsp;&nbsp;Now that you\'ve "Seen What Fits Your Truck," why not contact or visit the people at the Century Caps reseller listed above. They\'re the experts on Century Caps truck cap and tonneau installation, sizes, features and options. They are also your source for service, installation, parts and prices. They\'d be glad to tell you more about the Century Caps model you designed, and about. other choices that can add value and convenience to your truck.</p>' + pdata[dataID][0][3] + '<br/><br/><input type="button" value="Print" onclick="javascript: CallPrint();" name="print"/></div></div>';
                break
          case "RequestQuote":
                template= '<img vspace="3" src="template/images/century_logo.gif" align="left"/><br/><h1 style="margin-top: 0; padding-top: 0;">See What Fits Your Truck</h1><h3 style="margin-top: 0; padding-top: 0;">' + pdata[dataID][2] + '</h3><br clear="all"/><br/><div align="left">' + pdata[dataID][1] + '</div><br/><iframe name="eboxFrame" width="640" height="275" frameborder="0" scrolling="no" src="' + pdata[dataID][0] + '"></iframe><input type="button" value="Close" onClick="grayOut(false);"/>';
                break
	  default:
	  	template = pdata[dataID];
  }
  return template;
}