
function horizontal_zp(a_product_ids,
                      zone,
                      symbolic,
                      target_id,
                      category,
                      rec_attributes,
                      target_attributes,
                      target_header_txt)
{

   var html = '';

   if (symbolic !== '_NR_')
   {
      var div_title   = '<div class="io_recs_title_h"><h3>' + target_header_txt + '<\/h3><\/div>';
      var div_table   = '<div id="ioSliderBkgrd" class="intelOffer">';
      		div_table += '<div class="io_recs_table_h" id="ioSlider"><ul>';
      var image_table = ' ';
      var lines       = [];
      var recCnt      = a_product_ids.length;

      // Remove any Recommendations we already have 
      if (ourRecommendations.length !== 0)
      {
         recCnt = 0;
         for (var ii=0; ii < a_product_ids.length; ii++)
         {
            for (var iRecs=0; iRecs < ourRecommendations.length; iRecs++)
            {
               if (ourRecommendations[iRecs] == a_product_ids[ii]) 
               {
                  a_product_ids[ii] = '';
                  iRecs = ourRecommendations.length;
               }
            }

            if (a_product_ids[ii] !== '') 
            {
               recCnt = recCnt + 1;
            }
         }
      }
      
      // Limit the recommendations to 10
      maxRecs = Math.min(5,recCnt);
 
      // Set the width -- NOTE:  this may not be needed once formatted for slider!
      if (maxRecs > 0)
      {
         width = 100 / maxRecs;
      }
      else
      {
         width = 0;
      }


      // Recommendations
      recCnt = 0;
      for (var ii=0; ii < a_product_ids.length && recCnt < maxRecs; ii++)
      {
         var rec_prod_id = a_product_ids[ii];

         if (rec_prod_id !== '')   // Skip one's we eliminated above 
         {
            recCnt += 1;
            
            var image_description = rec_attributes[ii][0]; // product description

            // Format the recommended product's href 
            var part_number    = rec_prod_id.replace('P_', 'p_');
            var part_number_friendly = rec_prod_id.replace('P_', '#');
            var selected_href  = '/webapp/wcs/stores/servlet/ProductDisplay'
            selected_href     += '?storeId='    + js_storeId;
            selected_href     += '&catalogId='  + js_catalogId;
            selected_href     += '&langId='     + js_langId;
            selected_href     += '&partNumber=' + part_number;
            selected_href     += '&cm_vc=' + zone;

            // Format the recommended product's image URL 
            var image_url = js_catalogAssetImgDir + rec_attributes[ii][2];

            lines.push('<li class="ioBlock01 cm_element {href:\''+ selected_href +'\',ei:\''+zone+'\',ec:\'IO\'}">');
            	lines.push('<a class="ioExtra1" href="' + selected_href + '"><\/a>');
            	lines.push('<div class="ioPartNumInfo">');
            		lines.push('<a class="infoIcon cm_element {partNum:\''+part_number+'\', ei:\'IO-'+zone+'\', ec:\'Quick View\'}" href="' + selected_href + '" ><\/a>');
            		lines.push('<a href="' + selected_href + '" class="ioProdDescription"><span>' + part_number_friendly + '<\/span><\/a>');
            	lines.push('<\/div>');
            lines.push('<div class="clearFloat"><\/div>');
            lines.push('<a href="' + selected_href + '"><img class="ioImage" src="' + image_url + '?wid=80" width=80" \/>');
            lines.push('<a href="' + selected_href + '" class="ioProdDescription2"><span>' + image_description + '<\/span><\/a>');
            lines.push('<div class="clearFloat"><\/div>');
            lines.push('<\/li>');
 
         }
      }



      // make a text string
      html = div_title + div_table + image_table + lines.join("\n") + '<\/ul><div class="clearFloat"><\/div><\/div><!-- .io_recs_table_h --><\/div><!-- #sliderBkgrd -->';

   }
   document.getElementById('io_zone_1').innerHTML= html;
   
   
	// add events to quickview and outer li
	// requires jquery.js, common.js
	$('#io_zone_1  a.infoIcon').click(function(e){
		e.stopPropagation();
		e.preventDefault();
		//try{cmCreatePageElementTag($(this).metadata().ei,$(this).metadata().ec)}catch(e){}
		productQuickView('', $(this).metadata().partNum, zone); 
	});
	$('#io_zone_1  li.ioBlock01').click(function(e){
		e.preventDefault();
		//try{cmCreateElementTag("id", "cat");}catch(e){}
		location.href = $(this).metadata().href;
	});
}


function PPZ1_zp(a_product_ids,
                 zone,
                 symbolic,
                 target_id,
                 category,
                 rec_attributes,
                 target_attributes,
                 target_header_txt)
{
   horizontal_zp(a_product_ids, zone,symbolic, target_id, category, rec_attributes, target_attributes, target_header_txt);
}


function CATPZ1_zp(a_product_ids,
                   zone,
                   symbolic,
                   target_id,
                   category,
                   rec_attributes,
                   target_attributes,
                   target_header_txt)
{
   horizontal_zp(a_product_ids, zone,symbolic, target_id, category, rec_attributes, target_attributes, target_header_txt);
}



function CRTPZ1_zp(a_product_ids,
                   zone,
                   symbolic,
                   target_id,
                   category,
                   rec_attributes,
                   target_attributes,
                   target_header_txt)
{
   horizontal_zp(a_product_ids, zone,symbolic, target_id, category, rec_attributes, target_attributes, target_header_txt);
}
	



