function productItem(link, title, id, imgW, imgH, imgSRC, displaySeperator, price) {

  var seperator = '<td style="width:' + spacerWidth + 'px;"></td>';

  if (displaySeperator == false)
    seperator = '';

  var cena = '';

  if (price != '') {
    cena = 'Cena: <span>' + price + '</span>';
  }

  this.html = '<td valign="top" onclick="Redirect(\'' + link + '\');" class="catItemWidth2" style="text-align:center; height:166px;" id="' + id + '">' +
              '   <table cellpadding="0" cellspacing="0" border="0" class="catItemWidth2">' +
              '     <tr>' + 
              '       <td style="height:95px;">' +
              '         <a href="' + link + '">' +
              '           <img height="' + imgH + '" width="' + imgW + '" title="' + title + '" alt="' + title + '" src="' + imgSRC + '">' +
              '         </a>' +
              '       </td>' + 
              '     </tr>' + 
              '   </table>' +
              '   <div class="catItemTitle"><a href="' + link + '">' + title + '</a></div>' +
              '   <div class="catItemPrice">' + cena + '</div>' +
              '</td>' +
              seperator
}

function setAttr(attrNoOfBtns, attrBtnNo, MainPageItemsContainerID, selIndexNoID, selAttrID, productsArrayAll, btn, attrValue) {
  
  for (var i = 0; i <= attrNoOfBtns; i++) {
    if (i == attrBtnNo) {
      jQuery('#recommended_attrBtn_' + i).css("text-decoration", "none");
    }
    else {
      jQuery('#recommended_attrBtn_' + i).css("text-decoration", "underline");
    }
    
  
  }

  

  jQuery('#' + selAttrID).val(attrValue);
  jQuery('#' + selIndexNoID).val('1');
  genList(MainPageItemsContainerID, selIndexNoID, selAttrID, productsArrayAll, btn);
}

function genList(MainPageItemsContainerID, selIndexNoID, selAttrID, productsArrayAll, btn) {

   var containerWidth = (noOfItemsToDisplay * catItemWidth) + ((noOfItemsToDisplay - 1) * spacerWidth) + otherElementsWidth;
  var containerMiddleWidth = (noOfItemsToDisplay * catItemWidth) + ((noOfItemsToDisplay - 1) * spacerWidth) + otherElementsWidth - 32;
  
  jQuery('.MainPageRecommended').css('width', containerWidth + 'px');
  jQuery('.MainPageRecommended_Middle').css('width', containerMiddleWidth + 'px');
  jQuery('.RecommendedEditBtns').css('width', containerWidth + 'px');
  
  
  
  var startItem = parseInt(jQuery('#' + selIndexNoID).val());
  var link, title, id, imgH, imgW, imgSRC, displaySeperator, attributes, btnBack, btnNext;
  var allItemsHTML = '';
  var cnt = 0;
  var productsArray = new Array;
  var selAttrVal = jQuery('#' + selAttrID).val();
  var currNo = parseInt(jQuery('#' + selIndexNoID).val());

  if (selAttrVal == '0') {
    jQuery('#recommended_attrBtn_0').css("text-decoration", "none");
  }

  var btnBackEnabled = '<td style="width:50px;"><div class="MainPageRecommended_btn" id="navBtnBack' + MainPageItemsContainerID + '"><img src="' + pathRoot + 'images/catalogue/recommended/back.png" alt="Nazaj"/></div></td><td style="width:15px;"></td>';
  var btnNextEnabled = '<td style="width:15px;"></td><td style="width:50px;"><div class="MainPageRecommended_btn" id="navBtnNext' + MainPageItemsContainerID + '"><img src="' + pathRoot + 'images/catalogue/recommended/next.png" alt="Naprej"/></div></td>';
  var btnBackDisabled = '<td style="width:50px;"><div class="MainPageRecommended_btn_disabled"><img src="' + pathRoot + 'images/catalogue/recommended/back.png" alt="Nazaj"/></div></td><td style="width:15px;"></td>';
  var btnNextDisabled = '<td style="width:15px;"></td><td style="width:50px;"><div class="MainPageRecommended_btn_disabled"><img src="' + pathRoot + 'images/catalogue/recommended/next.png" alt="Naprej"/></div></td>';

  

  if (selAttrVal == '0') {
    productsArray = productsArrayAll;
  }
  else {

    

    for (var i = 0; i < productsArrayAll.length; i++) {

      attributes = '||' + productsArrayAll[i][6] + '||';

      if (attributes.indexOf('||' + selAttrVal + '||') > -1) {
        productsArray.push(productsArrayAll[i]);
      }
    }
  }

  var noOfProducts = productsArray.length;

  for (var i = (startItem - 1); i < noOfProducts; i++) {

    if (cnt < noOfItemsToDisplay) {

      if (i == noOfProducts - 1) {
        displaySeperator = false;
      }
      else {
        if (cnt == noOfItemsToDisplay - 1) {displaySeperator = false;}
        else {displaySeperator = true;}
      }

      var newItem = new productItem(productsArray[i][2], productsArray[i][1], productsArray[i][0], productsArray[i][3],
                                    productsArray[i][4], productsArray[i][5], displaySeperator, productsArray[i][7]);
      
      allItemsHTML += newItem.html;

      cnt++;

    }
  }

  if (noOfProducts <= noOfItemsToDisplay) {
    /*btnBack = '<td style="width:50px;"></td>';
    btnNext = '<td style="width:50px;"></td>';*/
    btnBack = '';
    btnNext = '';
  }
  else {

    if (btn == -1) {
      btnNext = btnNextEnabled;
      btnBack = btnBackDisabled;
    }
    else {

      if (currNo + noOfItemsToDisplay <= noOfProducts) {btnNext = btnNextEnabled;}
      else {btnNext = btnNextDisabled;}

      if (currNo - 1 > 0) {btnBack = btnBackEnabled}
      else {btnBack = btnBackDisabled;}

    }
  }

  var startPos = 0;
  if (btn == 0) {
    startPos = -652;
  } else if (btn == 1) {
  startPos = 652;
  }
  
    jQuery('#' + MainPageItemsContainerID).html('<table cellspacing="0" cellpadding="0" border="0">' +
                                              '   <tr>' +
                                                    btnBack +
                                              '     <td style="width:' + (containerMiddleWidth-130) + 'px;">' +
                                              '<div style="position:relative; width:' + (containerMiddleWidth - 130) + 'px; height:166px; overflow:hidden;">' +
                                              '     <div id="recommendedSlider_' + MainPageItemsContainerID + '" style="display:none; width:' + (containerMiddleWidth - 130) + 'px; height:166px; position:absolute; top:0; left:' + startPos + 'px;">' +
                                              '       <table cellspacing="0" cellpadding="0" border="0">' +
                                              '         <tr>' + allItemsHTML + '</tr>' +
                                              '       </table>' +
                                              '     </div>' +
                                              '     </div>' +
                                              '     </td>' +
                                                    btnNext +
                                              '   </tr>' +
                                              '</table>');

    if (btn == -1) {
      jQuery('#recommendedSlider_' + MainPageItemsContainerID).stop().animate({ "opacity": "show" }, 100);
    }
    else {
      jQuery('#recommendedSlider_' + MainPageItemsContainerID).stop().animate({ "opacity": "show", "left": "0px" }, 100);
    }

    

  jQuery('#navBtnNext' + MainPageItemsContainerID).click(function() {
    var newNo = currNo + noOfItemsToDisplay;

    if (newNo <= noOfProducts) {
      jQuery('#' + selIndexNoID).val(newNo);

      jQuery('#recommendedSlider_' + MainPageItemsContainerID).stop().animate({ 'opacity': 'hide', 'left': (0-containerMiddleWidth-131) + 'px' }, 200);

      //genList(MainPageItemsContainerID, selIndexNoID, selAttrID, productsArrayAll, 1);
      setTimeout(function() { genList(MainPageItemsContainerID, selIndexNoID, selAttrID, productsArrayAll, 1); }, 200);


    }
  });

  jQuery('#navBtnBack' + MainPageItemsContainerID).click(function() {
    var newNo = currNo - noOfItemsToDisplay;
    if (newNo > 0) {
      jQuery('#' + selIndexNoID).val(newNo);

      jQuery('#recommendedSlider_' + MainPageItemsContainerID).stop().animate({ "opacity": "hide", "left": (containerMiddleWidth-131) + "px" }, 200);

      //genList(MainPageItemsContainerID, selIndexNoID, selAttrID, productsArrayAll, 0);

      setTimeout(function() { genList(MainPageItemsContainerID, selIndexNoID, selAttrID, productsArrayAll, 0); }, 200);
    }
  });
}