//////////////////////////////////////////////////////////////////////////
// pinlib.js
// Generate the catalog pages
//
// History:
// 7/9/02   Make 'special' a separate parameter (from ~6/5 download)
//          Put next buttons on top.
//          Add 'new' label
//////////////////////////////////////////////////////////////////////////

// ------ Catalog globals ------
var itemList = new Array();
var CurrentPin = 0; // current detail pin object
var itemstart = 0;  // first item to display from inventory
var itemspp = 20;  // items per page
var use_style = 0;

//------ Functions  -----

function pinitem(thumb1, name1, price1, detail1, special1)
{
  this.thumb = thumb1;
  this.name = name1;
  this.price = price1;
  this.detail = detail1;
  this.special = special1;
}

function addpin(thumb, name, price, detail, special)
{
  var i = itemList.length;

   itemList[i] = new pinitem(thumb, name, price, detail, special);
}

function init()
{
// load 1st detail image
   setDetail(itemstart);
}


function nextPage(updn)
{
 var nextstart=itemstart+itemspp*updn;
 if (nextstart < 0) {
   nextstart = 0;
 }
 if (nextstart >= itemList.length) {
    nextstart = itemList.length - itemspp;
 }
 var page=location.pathname;
 location.href= page + "?itemstart="+nextstart;
}


/////////////////////////////////////////////////////////
// setDetail
// Load the detail image with a specified pin from table
// Set the buy button label.
////////////////////////////////////////////////////////
function  setDetail(pindx, newwin)
{
  var pin = itemList[pindx];
  MM_changeProp('detail','','src','loading.gif','IMG');
  if (newwin == 1)
  {
      window.open(pindir+pin.detail, "detail", "WIDTH=288,HEIGHT=514");
  }
  //else
  //{
    MM_changeProp('detail','','src', pindir+pin.detail, 'IMG');
  //}
  CurrentPin = pin;
  
  if (document.buyform) {
    var label=pin.name;
    if (label.length > 20) {
      label = label.substring(0,21)
    }  
    document.buyform.buybutton.value = label;
  }
}


///////////////////////////////////
// buy
// Add current item to the cookie
// "/name@price"
//  style=style
//  color=color
///////////////////////////////////
function buy() // use global 'catalog' var
{
  //append Current pin to cookie
  var value = WM_readCookie("pinorder");
  value = value+"/"+catalog+"-"+ CurrentPin.name;
  var ndx;
  if (use_style ==1)
  {
      ndx = document.buyform.style1.selectedIndex;
      value = value + "  style=" + document.buyform.style1.options[ndx].value;
  }
  if (use_style ==2)
  {
      ndx = document.buyform.color.selectedIndex;
      value = value + "  color=" + document.buyform.color.options[ndx].value;
  }
  value = value + "@"+CurrentPin.price;
  WM_setCookie ("pinorder", value);
  location.href="shoppingCart.htm";
}


/////////////////////////////////////////////////////////////
// printCatalogPage
// parms:
//   detail width, height, number of columns, 
//   fstyle - 1 allow style selection, 2 color selection
//   show in pop up window
//   version: 2=shopping cart
//
/////////////////////////////////////////////////////////////
function printCatalogPage(dw, dh, numColumns, fstyle, showfull)  
{
// ENABLE SHOPPING CART - all catalogs
var version=2;
var borderwidth = 1;

// Get itemstart from URL
var temp=location.search;
var i=temp.indexOf("itemstart=");
var lastitem =0;
use_style = fstyle;

if (numColumns < 2)
{
  numColumns = 5;
}

if (i >= 0)
{
  temp=temp.substring(i+10);//117
  itemstart=parseInt(temp);
}
if (isNaN(itemstart))
{
   itemstart=0;
}

// Page Constants, based on itemstart
lastitem = itemstart + itemspp-1;   // index of last item displayed this page
if (lastitem >= itemList.length) {
  lastitem = itemList.length-1;
}
// next/prev buttons?
var isnext = true;
var isprev = false;

if (itemstart > 0) {
  isprev = true;
}
if (lastitem >= (itemList.length-1)) {
  isnext = false;
}

  
// ------- generate table of pins----------

  var htmltext = "";


  htmltext += '<form  name="bform"><table width=100%  cellspacing=0 cellpadding=0 border=0 ><tr>';

  htmltext += '<td align="right" valign="bottom" >';
  htmltext += '<a name="anchor" ></a>';
  htmltext += '<font color="#330033" size="+1">Click any image to see larger detail&nbsp;</font><font size="-1">(may take a few seconds)</font></td>';
  
  
  //-- next/prev buttons --
  htmltext += '<td align=right valign="bottom">';
  htmltext += "Viewing items "+(itemstart+1) + " through " + (lastitem+1);
  if (isprev) {
    htmltext += '<input type="button"  name="prevbutton" value="<<Prev"  onclick="nextPage(-1)">';
  }
  if (isnext) {
    htmltext += '<input type="button"  name="nextbutton" value="Next>>"  onclick="nextPage(1)">';
  }
  htmltext += '</td></tr></table></form>';
  
  document.write(htmltext);


  htmltext = "";
  //if (border == false) {
  //} else {
  //}
    htmltext += '<table width="100%" border="'+borderwidth+'" cellspacing="2" cellpadding="2" align="center"  bgcolor="#FFFFFF">';

  // The Detail Image Cell
  htmltext += '<tr><td rowspan="4" bgcolor="#FFFFFF"  valign="top" align="center">';
  htmltext += '<img src="" width="'+dw+'" height="'+dh+'" border=2 name="detail">';
  
  // the Order Button or link
  if (version==2)
  {
    htmltext += '<form  name="buyform" >';
    
    if (use_style == 1)
    {
        htmltext +=  'Choose a style:';
        htmltext += "\n<select name='style1' >";
        htmltext += "\n<option selected value = 'Eyeglass Holder'>Eyeglass Holder</option>";
        htmltext += "\n<option value = 'Necklace'>Necklace</option>";
        htmltext += "</select>";
    }
    if (use_style == 2)
    {
        htmltext +=  'Choose a color:';
        htmltext += "\n<select name='color' >";
        htmltext += "\n<option selected value = 'Blue'>Blue</option>";
        htmltext += "\n<option value = 'Black'>Black</option>";
        htmltext += "\n<option value = 'Pink'>Pink</option>";
        htmltext += "\n<option value = 'Lavender'>Lavender</option>";
        htmltext += "\n<option value = 'Green'>Green</option>";
        htmltext += "</select>";
    }

    htmltext += '<br>Click here to BUY this item<br>';
    htmltext += '<input type="button" onclick="buy()" value=".....Buy This Pin!...." name="buybutton" />';
    htmltext += '<br><a href="shoppingCart.htm">View shopping cart</a>';
    htmltext += '</form>';
  }
  else {
    htmltext += '<p><a href="orderform.htm" target="newwin">ORDER!</a> ';
  }
  htmltext+= '</td>';

  document.write(htmltext);

  var i;
  var col = 0;
  // for each pin 
  for (i = 0; i < itemspp; i++)
  {
     htmltext = "";

     var ndx = itemstart+i;
     // if not reached end of inventory
     if (ndx < itemList.length)
     {
       // get the pin from inventory list
       // Display thumbnail pic name and price
       var thispin = itemList[ndx];
       htmltext += '<td width="20%" bgcolor="#FFFFFF" >';//height="98"
       htmltext += ' <p align="center">';
       
       
       if (thispin.special == "special") {
         // link to specials page
         htmltext += '<a href="specials.htm" >';
         htmltext += ' <img src="'+pindir+thispin.thumb + '" border="0"> <br>';
         htmltext +=  '<font color="#330033" size="-1">' + thispin.name + '<br>';
         htmltext +=  '<font color="red" size="-1">special</a></font></td>';
       } 
       else {
         // regular pin display
         if (showfull==1)
         {
           // full detail in new window
           htmltext += '<a href="#anchor" onClick="setDetail(' + ndx + ',1)" >';
         } 
         else
         {
           htmltext += '<a href="#anchor" onClick="setDetail(' + ndx + ')" >';
         }
         htmltext += ' <img src="'+pindir+thispin.thumb + '" border="0">';
         htmltext +=   ' </a><br>';

         if (thispin.special == "new") {
           htmltext += '<font color="#ff00ff">New!</font>';
         }
         htmltext +=  ' <font color="#330033"  size="-1">' + thispin.name + '<br>';
         htmltext +=  '$' + thispin.price + '</font></p></td>';
       }
         
     }
     else
     {  // end of inventory, 
       htmltext='<td width="20%">&nbsp;</td>';
     }
     document.write(htmltext);
     col++;
     if (col >= numColumns) {
        document.write("</tr><tr>");
        col=0;
     }
  }
  document.write('</tr></table>');

  
}