/*** COPYRIGHT 2010  BY CUTSEY BUSINESS SYSTEMS LTD. - ALL RIGHTS RESERVED ***/
/* product.js -- Product Page Javascript                                     */
/*****************************************************************************/
/* 010000 CAT - Created               */
/*****************************************************************************/
var coordinatesList = new Array();
var companionsList = new Array();
var zoomObj;
var webSrvCgiBin = hostUrl + appUrl + "/";
var webSrv = hostUrl + webServer + "/";
var displayHTML = "";
var styleHasDetailImages = false;
var companionCount = 0;
var compAdded = false;
var displayFamilyName = true;

function loadCompanions(category, style, color, size, sponsor) {
 var currentTime = new Date();
 var currentSecs = (((currentTime.getHours() * 60) + currentTime.getMinutes()) * 60) + currentTime.getSeconds();
 var noCache = "&nocache=" + currentSecs;
 var foundCoordinateStyle = false;
 var foundCompanionStyle = false;
 var displayHeader = true;
 displayFamilyName = true;
 companionCount = 0;
 displayHTML = "";

 /* temporary fix until Bodek fixes their color companion data */
 if (color != "")
  color = "";
 /*
 if (color != "" || coordinatesList[0] != null || companionsList[0] != null)
  return;
 */
 // loop through coordinates and append HTML to display
 $.each(coordinatesList, function(i) {
  if(coordinatesList[i] != null && coordinatesList[i].searchStyle == style &&
   coordinatesList[i] != null && coordinatesList[i].searchColor == color) {
   foundCoordinateStyle = true;

   // because IE is pretty lame we need to wrap everything in this table...
   if (displayHeader)
   {
    displayHeader = false;
	//IE sucks
    displayHTML = '<table border="0" cellpadding="0" cellspacing="0"><tr><td><table class="tabTable" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td>';
   }

   appendToCoordinatesDisplay(coordinatesList[i], sponsor, noCache);
  }
 });

 if (!displayHeader)
  displayHTML += '</td></tr><tr><td>';

 if (!displayHeader)
  displayHTML += '</td></tr><tr><td class="companionContainer">';

 // loop through companions that belong to the current category
 $.each(companionsList, function(i) {
  if(companionsList[i] != null &&
   companionsList[i].searchStyle == style &&
   companionsList[i].searchColor == color &&
   companionsList[i].searchSize == size &&
   companionsList[i].productCode == category) {
   foundCompanionStyle = true;

   compAdded = appendToCompanionsDisplay(companionsList[i], sponsor, noCache);
  }
 });

 // loop through companions that do not belong to the current category
 $.each(companionsList, function(i) {
  if(companionsList[i] != null &&
   companionsList[i].searchStyle == style &&
   companionsList[i].searchColor == color &&
   companionsList[i].searchSize == size &&
   companionsList[i].productCode != category) {
   foundCompanionStyle = true;

   compAdded = appendToCompanionsDisplay(companionsList[i], sponsor, noCache);
  }
 });

 if (!displayHeader)
  displayHTML += '</td></tr></table></td></tr></table>';

 // if we have found our data, output it and ignore sending the AJAX request
 if (foundCoordinateStyle || foundCompanionStyle) {
  displayCompanionsTab();
  return;
 }

 // we did not find the style data so let's request it
 $.ajax({
  type: "GET",
  url: webSrvCgiBin + "olc/get-relationships.w?style=" + style + "&color=" + color + "&size=" + size + "&frames=no&target=main&sponsor=" + sponsor + noCache,
  dataType: "xml",
  complete: function(data) {
   allStylesObj = $.xmlToJSON(data.responseXML);

   if (allStylesObj != null) {
    var hasCoordinates = false;
    var hasCompanions = false;
    displayFamilyName = true;
    displayHeader = true;
    companionCount = 0;

    // because IE is pretty lame we need to wrap everything in this table...
    if (displayHeader)
    {
     displayHeader = false;
	 //IE sucks
     displayHTML = '<table border="0" cellpadding="0" cellspacing="0"><tr><td><table class="tabTable" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td>';
    }

    // build coordinates display
    if (allStylesObj.ttCoordinate != null) {
     $.each(allStylesObj.ttCoordinate, function(i) {
      // attempt to add this style to the coordinates list
      addToList(coordinatesList, allStylesObj.ttCoordinate[i]);

      appendToCoordinatesDisplay(allStylesObj.ttCoordinate[i], sponsor, noCache);

      hasCoordinates = true;
     });
    }

    if (!displayHeader)
     displayHTML += '</td></tr><tr><td>';

    if (!displayHeader)
     displayHTML += '</td></tr><tr><td class="companionContainer">';

    // build companions display
    if (allStylesObj.ttCompanion != null) {
     // loop through companions in our current category
     $.each(allStylesObj.ttCompanion, function(i) {
      // attempt to add to the list
      addToList(companionsList, allStylesObj.ttCompanion[i]);

      if (allStylesObj.ttCompanion[i].productCode == category)
      {
       compAdded = appendToCompanionsDisplay(allStylesObj.ttCompanion[i], sponsor, noCache);
       hasCompanions = true;
      }
     });

     // companions not in current category
     $.each(allStylesObj.ttCompanion, function(i) {
      if (allStylesObj.ttCompanion[i].productCode != category) {

       compAdded = appendToCompanionsDisplay(allStylesObj.ttCompanion[i], sponsor, noCache);
       hasCompanions = true;
      }
     });
    }

    if (!displayHeader)
     displayHTML += '</td></tr></table></td></tr></table>';
   }

   // either hide or display companions tab based on results
   if (!hasCoordinates && !hasCompanions) {
    hideCompanionsTab();
   }
   else if (hasCoordinates || hasCompanions) {
    displayCompanionsTab();
   }
  }
 });
} // loadCompanions()

// add a style to a list
function addToList(listToAdd, styleToAdd)
{
 var addStyle = true;
 $.each(listToAdd, function(j) {
  if (listToAdd[j] != null &&
   listToAdd[j].styleCode == styleToAdd.styleCode &&
   listToAdd[j].colorCode == styleToAdd.colorCode &&
   listToAdd[j].sizeCode == styleToAdd.sizeCode) {
   addStyle = false;
   return;
  }
 });
 if (addStyle) {
  listToAdd[listToAdd.length] = styleToAdd;
 }
}

// we need to append data to the coordinate display
function appendToCoordinatesDisplay(coordinateStyle, sponsor, noCache) {
 // link to the style
 var styleLink = webSrvCgiBin + "site.w?location=olc/cobrand-product.w&category=" + coordinateStyle.productCode +
  "&prb=&srb=&mill=&shade=&color=" + coordinateStyle.colorCode + "&product=" + coordinateStyle.styleCode +
  "&frames=no&target=main&sponsor=" + sponsor + noCache;

 // build the display for this coordinate
 displayHTML +=
  '<table cellspacing="0" cellpadding="2" class="coordTbl">' +
  ' <tr>' +
  '  <td width="69">';

 // if we have a color code, use the colored image
 if (coordinateStyle.colorCode != "") {
  displayHTML += '<a href="' + styleLink + '"><img class="thumbBorder" src="' + webSrv + 'assets/images/still/thumb/' +
   coordinateStyle.styleCode + '_' + coordinateStyle.colorCode + '_th.jpg" width="69" /></a><br />';
 }
 else { // use the small model image
  displayHTML += '<a href="' + styleLink + '"><img class="thumbBorder" src="' + webSrv + 'assets/images/model/small/' +
   coordinateStyle.styleCode + '_mod_sm.jpg" width="69" /></a><br />';
 }

 displayHTML +=
  '</td>' +
  '  <td width="5">&nbsp;</td>' +
  '  <td valign="top">' +
  '<span class="coordinateDescription">' + coordinateStyle.description + '</span><br />' +
  '<span class="companionStyle">Style: </span><a href="' + styleLink + '"><b class="companionStyleNum">' + coordinateStyle.styleCode + '</b></a><br />' +
  '<a href="' + styleLink + '"><span class="compDesc">' + coordinateStyle.styleDesc + '</span></a>' +
  '</td>' +
  ' </tr>' +
  '</table>';
}

// we need to append data to the companions display
function appendToCompanionsDisplay(companionStyle, sponsor, noCache) {
 // we don't want to display duplicates.. if it's already displayed as a coordinate don't display as a companion
 var alreadyDisplayed = false;
 var companionMod = 0;
 var companionCLass = "";
 var companionPad = "";

 if (coordinatesList.length > 0) {
  $.each(coordinatesList, function(i) {
   if (companionStyle.styleCode == coordinatesList[i].styleCode) {
    alreadyDisplayed = true;
    return false;
   }
  });
  if (alreadyDisplayed) {
   return false;
  }
 }

 if (displayFamilyName)
 {
  displayHTML += '<div class="rule" style="display: block; padding:0; border: 0; background-color: #666;"><img src="' + webSrv + 'images/spacer.gif" width="1" height="1" /></div>';
  displayHTML += '<table align="center" border="0" cellpadding="0" cellspacing="0"><tr><td><span class="familyDesc">' + allStylesObj.ttCompanion[0].familyDesc + '</span></td></tr></table>';
  displayFamilyName = false;
 }

 companionCount ++;

 // figure out proper padding, we want 3 per row
 companionMod = companionCount % 3;

 if (companionMod == 0)
 {
  companionClass = "companionBlock companionBlockRight";
  companionPad   = "padding: 0; margin: 0px 0px 0px 5px;"
 }
 else if (companionMod == 1)
 {
  companionClass = "companionBlock companionBlockLeft";
  companionPad   = "padding: 0; margin: 0px 5px 0px 0px;";
 }
 else if (companionMod == 2)
 {
  companionClass = "companionBlock companionBlockCenter";
  companionPad   = "padding: 0; margin: 0px 5px 0px 5px;";
 }

 // link to the style
 var styleLink = webSrvCgiBin + "site.w?location=olc/cobrand-product.w&category=" + companionStyle.productCode +
  "&prb=&srb=&mill=&shade=&color=" + companionStyle.colorCode + "&product=" + companionStyle.styleCode +
  "&frames=no&target=main&sponsor=" + sponsor + noCache;

 // start building div for style
 displayHTML += '<div class="' + companionClass + '" style="display: block; border: 0px; ' + companionPad + '">';

 // display style-feature companion description
 displayHTML += '<div class="companionDesc" style="display: block; border: 0px; padding: 5px 0 0 0;">' + companionStyle.description + '</div>';

 // if we have a color code, use the colored image
 if (companionStyle.colorCode != "") {
  displayHTML += '<a href="' + styleLink + '"><img class="thumbBorder" src="' + webSrv + 'assets/images/still/thumb/' +
   companionStyle.styleCode + '_' + companionStyle.colorCode + '_th.jpg" width="69" /></a><br />';
 }
 else { // use the small model image
  displayHTML += '<a href="' + styleLink + '"><img class="thumbBorder" src="' + webSrv + 'assets/images/model/small/' +
   companionStyle.styleCode + '_mod_sm.jpg" width="69" /></a><br />';
 }

 displayHTML +=
  ' <a href="' + styleLink + '"><span class="compStyleNumSm">' + companionStyle.styleCode + '</span></a>' +
  '</div>';

 return true;
}

function displayCompanionsTab() {
 // this is needed because the divs are set to float so no height is on them.
 // this tricks the browser into setting the container divs heat
 //displayHTML += '<br /><img src="' + webSrv + 'spacer_invis.gif" height="1px" width="100%" />';

 $("#liTab3").toggle(true);
 $("#divCompanionStyles").html(displayHTML);
}

function hideCompanionsTab() {
 $("#liTab3").toggle(false);
 $("#divCompanionStyles").toggle(false);
 $(".css-tabs:first").tabs(".css-panes:first > div");
}

// this function is used by cobrand-product-desc.i to hide/show the tab selectors.
function hasDetailImages() {
 return styleHasDetailImages;
}

// this function is used by cobrand-product-desc.i to hide/show the tab selectors.
function hasCoordinatesOrCompanions()
{
 if (coordinatesList.length > 0 || companionsList.length > 0) {
  return true;
 }

 return false;
}

function showDetailTab() {
 $("#liTab2").toggle(true);
 styleHasDetailImages = true;
}

function hideImage(image) {
 $("#" + image.id).toggle(false);
 $("#td" + image.id).remove();
 return true;
}