var thumbSize = 180;			// max dim of each thumb
var miniHeight = thumbSize + 28 + 10;	// = image + h4 + catStackHold.bottomMargin
var scrollWidth = "600";		// thumbSize image width x 3

// ajax db=gui elements
function loadGUI() {
  // prevents recursion from ajaxStop trigger
  if ($('#loading').is(':hidden')) { return }

  // load general GUI: [db=gui]
  $('[db=gui]').each( function() {
    $.getJSON('/ajax/load.pl',
    {
      'db': 'gui',
      'select': 'html',
      'where': 'code,eq,' + $(this).attr('col'),
      'dataTag': $(this).attr('col')
    },
    function(jsonData) {
      $.each ( jsonData, function(elemIndex, elemValue) {
        $('[col=' + elemValue.dataTag + ']').html(elemValue.html);
      })
    })
  });
}

function ajaxStopFunc() {
  setEdit(0);	// LATER: depends on cookie

  // update "page x of y" elems
  $('.catStackImgs').each( function(index, catStackImgsElem) {
    var catUid = $(catStackImgsElem).attr('cat');
    if (typeof(catUid) != "undefined") {
      var currStampPage = 0 - $('.catStackImgs[cat='+catUid+']').position().left / scrollWidth;
      var maxStampPage = parseInt(($('.catStackImgs[cat='+catUid+'] a').length-1) / 3);
      updatePageId('cat=' + catUid, 0, maxStampPage);	/* start on page 0 */
    }

    var minmaxUid = $(catStackImgsElem).attr('minmaxUid');
    if (typeof(minmaxUid) != "undefined") {
      var currStampPage = 0 - $('.catStackImgs[minmaxUid='+minmaxUid+']').position().left / scrollWidth;
      var maxStampPage = parseInt(($('.catStackImgs[minmaxUid='+minmaxUid+'] a').length-1) / 3);
      updatePageId('cat=' + minmaxUid, 0, maxStampPage);	/* start on page 0 */
    }
  });

  loadGUI();
  $('.catStackImgs a')
    .lightBox( {overlayBgColor: '#333', overlayOpacity: 0.8, keyToPrev:'', keyToNext:'' } );
  $('#lightbox-thumb-container img').live('mouseenter',
   function() {
     var detImgSrc = $(this).attr('src');
     $('.catStackImgs a').lightBox.resetImageSrc(detImgSrc);
     return false;
   } );
  $('#loading').hide();	/* hide "Loading..." message */
}


// REPLACE LATER WITH 'if editing'
function setEdit(edit) {
  $('.catStack')
    .css({'height': miniHeight + 'px'});
  $('#pickCatsForm')
    .hide();
  $('.onHold')
    .hide()
}


// tell user the current page number and max possible page. 
// pass 0-rel page numbers.
// BUG: if actively scrolling, curr is fractional
function updatePageId(selector, curr, last) {
  if (curr == -1) { curr = last }
  $('.catStack[' + selector + '] span.pageId').html('Page ' + (curr+1) + ' of ' + (last+1));
}

// given a space-separated string of detail image filenames, return
//  a #lightbox-thumb-container div that shows all those images.
function fillThumbContainer(detImageList) {
  var thumbStr = '';
  if (detImageList.length) {
    thumbStr += '<div id="lightbox-thumb-container">';
    var detImageArray = detImageList.split(' ');
    var code = detImageArray[0].replace('det','big');
    thumbStr += ' <img src="images-work/' + code + '" alt="">';
    for (var d in detImageArray) {
      thumbStr += ' <img src="images-work/' + detImageArray[d] + '">';
    }
    thumbStr += '</div>';
  }
  return thumbStr;
}

  
// sort the view of works by a criteria: category|price|size (size is longest
// dimension) 
function sortView(crit) {

  $('#catHold')
    .fadeOut('slow')
    .empty()
  ;
  $('#loading').show();

  // if numeric, prepend a dollar sign, else leave it along
  function formatPrice(priceString) {
    if (parseInt(priceString) > 0) {	
      return '$' + priceString;
    }
    return '[ ' + priceString + ' ]';
  }

  // return a HTML string for the details of the work that are optionally shown.
  // elemValue is assumed to contain: price, title, size, media, code, media
  function makeTitleDetailsDiv(elemValue) {
      var ppButton = "http://images.paypal.com/images/sc-but-01.gif";
      var titleHtml = '';
	titleHtml += '<div id="titleDetails" style="display:none;">';
	if(elemValue.price) {
	  titleHtml += '<div id="priceBox">';
	  if (parseInt(elemValue.price) > 0 || elemValue.price == "Price on Request") {
	    var con = "<br>"
	            + "Email: <a href=\"mailto:Jane@JaneGartnerFineArt.com?subject="
		      + escape(elemValue.title)
		      + "\">Jane@JaneGartnerFineArt.com</a><br>"
	            + "Voice: <a href=\"tel:1-925-323-2433\">925&middot;323&middot;2433</a><br>";
	    var pp =	// paypal anchor
	        '<a href="' 
	        + "https://www.paypal.com/cgi-bin/webscr?cmd=_cart"
                + "&add=1"
                + "&bn=PP%2dShopCartBF%3abtn_cart_LG%2egif%3aNonHostedGuest"
                + "&business=elyroal@gmail.com"
                + "&item_name=" + escape(elemValue.title)
                + "&on0=Size"
                + "&os0=" + escape(elemValue.size)
                + "&on1=Media"
                + "&os1=" + escape(elemValue.media)
                + "&item_number=" + escape(elemValue.code)
                + "&amount=" + escape(formatPrice(elemValue.price))
	      + '"><img src="' + ppButton + '"></a>'
	      + '<br>[Shipping to be calculated based<br>on size, weight and destination.]'
              ;
	    //titleHtml += '<span class="price">' + formatPrice(elemValue.price) + '</span>';
	    //titleHtml += pp ; 
	    //titleHtml += "<br>" + con ; 
	  } else {
	    titleHtml += '<br><span class="price">' + formatPrice(elemValue.price) + '</span>';
	  }
	  titleHtml += '</div>';
	}
	if (elemValue.size ) { titleHtml += '<br>(' + elemValue.size + ')'; }	// may have double-quotes
	if (elemValue.media) { titleHtml += '<br>' + elemValue.media; }
	titleHtml += '<br>';
	titleHtml += '</div>';	// titleDetails
    return titleHtml;
  }


  if (crit == 'category') {


  // load up the specified catStack with thumbs not on hold
  function fillCatStack(catUid) {
    // WORKING HERE: figure out how to get catUid into getJSON call
    var query = {
      'db': 'work',
      'select': 'row,code,bigImage,bigImageWidth,bigImageHeight,onHold,title,workList,price,size,media,detImageList',
      'where': 'code,ne,""',	// all records
      'dataTag': catUid	// associate with the right catStack
    };
    $.getJSON('/ajax/load.pl', query, function(jsonData) {
      // get catUid from the first jsonData... the long way...
      var firstKey;
      for (var k in jsonData) {
        firstKey = k;
      }
      var catUid = jsonData[firstKey].dataTag;

      var workList = $('.catStackImgs[cat='+catUid+']').attr('workList');
      var order = sortJsondataByWorkList(jsonData, workList);
      for (var i in order) {
        var elemIndex = order[i].elemIndex;
        var elemValue = order[i].elemValue;
        // center vertical & horizontal when scaled to a (scrollWidth x scrollWidth) space
        var scaledWidth = parseInt(thumbSize * (elemValue.bigImageWidth / elemValue.bigImageHeight));
        if (scaledWidth > thumbSize) {scaledWidth = thumbSize;}
        var scaledHeight = parseInt(thumbSize * (elemValue.bigImageHeight / elemValue.bigImageWidth));
        if (scaledHeight > thumbSize) {scaledHeight = thumbSize;}
        var classList = ((elemValue.onHold == '1') ? 'class="onHold"' : "");

        // title: the image's html caption when presented by lightbox; no single quotes allowed.
	var titleHtml = '';
	    var con = "<br>"
	            + "<a style=\"color:#008;\" href=\"mailto:Jane@JaneGartnerFineArt.com?subject="
		      + escape(elemValue.title) + ' (' + formatPrice(elemValue.price) + ')'
		      + "\">Email</a>"
	            //+ "<a href=\"tel:1-925-323-2433\">925&middot;323&middot;2433</a><br>"
		    ;
	titleHtml += '<span class="title" style="margin-right:10px;">' + elemValue.title + '</span>';
	titleHtml += '<span class="price" style="margin-right:10px;">' + formatPrice(elemValue.price) + '</span>';
	if (elemValue.size ) { titleHtml += '<span class="size" style="margin-right:10px;">' + '(' + elemValue.size + ')</span>'; }	// may have double-quotes
	if (elemValue.media) { titleHtml += '<span class="media" style="margin-right:10px;">' + elemValue.media + '</span>'; }
	//titleHtml += '<button onclick="toggleTitleDetails();">Show Details</button>';
	titleHtml += con;
	//titleHtml += makeTitleDetailsDiv(elemValue);
        titleHtml += fillThumbContainer(elemValue.detImageList);

        var newElem = 
              '<a'
	      + ' href="images-work/' + elemValue.code + '-big.jpg"'
	      + " title='" + titleHtml + "'"
	      + '>'
          +   '<img db="work" ' + classList 
          +   ' src="images-work/' + elemValue.code + '-thumb.jpg"'
          +   ' style="'
          +     'padding: ' + parseInt((thumbSize - scaledHeight)/2.0) + 'px ' + parseInt((thumbSize - scaledWidth)/2.0) + 'px'
          +   ';"'
          +   'title="' + elemValue.title + '"'
          +   '>'
          + '</a>';
        $('.catStack[cat=' + elemValue.dataTag + ']').find('.catStackImgs').append(newElem);
      }
    })
  }

  // load catHold with catStacks, then fill catStacks with thumb images.
  // add big buttons to each catStack's sides to scroll left/right

  $.getJSON('/ajax/load.pl',
    {
      'db': 'cat'
    },
    function(jsonData) {
      //XXX jsonData.sort(displayOrder)
      var order = sortJsondataByDisplayOrder(jsonData);
      for (var i in order) {
        var elemIndex = order[i].elemIndex;
        var elemValue = order[i].elemValue;
        var classList = "catStack" + ((elemValue.onHold == '1') ? " onHold" : "");
        var newElem = 
              '<div class="' + classList + '"'
               + ' cat="' + elemIndex + '"'
               + '>'
            + ' <h4>'
            + '     <span db="cat" col="title">' + elemValue.title + '</span>'
            + '     <span class="pageId">Page x of y</span>'
            + ' </h4>'
            + ' <a class="scrollLeftBox" cat="' + elemIndex + '">'
            + '   <img class="scrollLeft" src="left-arrow-semi-rd.gif">'
            + ' </a>'
            + ' <div class="catStackImgsHold">'
            + '   <div class="catStackImgs" cat="' + elemIndex + '"'
              +     ' workList="' + elemValue.workList + '"'
              +     ' style="width:10000px"></div>'
            + ' </div>'
            + ' <a class="scrollRightBox" cat="' + elemIndex + '">'
            + '   <img class="scrollRight" src="right-arrow-semi-rd.gif">'
            + ' </a>'
            + '</div>';
        $('#catHold').append(newElem);
        if (elemValue.workList.length) { fillCatStack(elemIndex) }
      }
    });

    // assign click handlers for left/right scroll buttons
    $('.scrollLeftBox').live('click',
     function() {
        // 3 stamp images per page

        var catUID = $(this).attr('cat');
	if (typeof(catUID) != "undefined") {
          var currStampPage = 0 - $('.catStackImgs[cat='+catUID+']').position().left / scrollWidth;
          var maxStampPage = parseInt(($('.catStackImgs[cat='+catUID+'] a').length-1) / 3);
          if (currStampPage > 0) {
            $('.catStackImgs[cat='+catUID+']').animate( {'left': '+=' + scrollWidth + 'px'}, 1000);
          } else {
            $('.catStackImgs[cat='+catUID+']').css( {'left': maxStampPage * -scrollWidth + 'px'});
          }
          /* update with future values AFTER scroll completes; not sure why max+1 is needed */
          updatePageId('cat=' + catUID, (currStampPage-1)%(maxStampPage+1), maxStampPage);
	}

        var minmaxUID = $(this).attr('minmaxUid');
	if (typeof(minmaxUID) != "undefined") {
          var currStampPage = 0 - $('.catStackImgs[minmaxUid='+minmaxUID+']').position().left / scrollWidth;
          var maxStampPage = parseInt(($('.catStackImgs[minmaxUid='+minmaxUID+'] a').length-1) / 3);
          if (currStampPage > 0) {
            $('.catStackImgs[minmaxUid='+minmaxUID+']').animate( {'left': '+=' + scrollWidth + 'px'}, 1000);
          } else {
            $('.catStackImgs[minmaxUid='+minmaxUID+']').css( {'left': maxStampPage * -scrollWidth + 'px'});
          }
          /* update with future values AFTER scroll completes; not sure why max+1 is needed */
          updatePageId('minmaxUid=' + minmaxUID, (currStampPage-1)%(maxStampPage+1), maxStampPage);
	}

      })
     ;

    $('.scrollRightBox').live('click',
     function() {

        var catUID = $(this).attr('cat');
	if (typeof(catUID) != "undefined") {
          var currStampPage = 0 - $('.catStackImgs[cat='+catUID+']').position().left / scrollWidth;
          var maxStampPage = parseInt(($('.catStackImgs[cat='+catUID+'] a').length-1) / 3);
          if (currStampPage < maxStampPage) {
            $('.catStackImgs[cat='+catUID+']').animate( {'left': '-=' + scrollWidth + 'px'}, 1000);
          } else {
            $('.catStackImgs[cat='+catUID+']').css( {'left': '0'});
          }
          updatePageId('cat=' + catUID, (currStampPage+1)%(maxStampPage+1), maxStampPage);
	}

        var minmaxUID = $(this).attr('minmaxUid');
	if (typeof(minmaxUID) != "undefined") {
          var currStampPage = 0 - $('.catStackImgs[minmaxUid='+minmaxUID+']').position().left / scrollWidth;
          var maxStampPage = parseInt(($('.catStackImgs[minmaxUid='+minmaxUID+'] a').length-1) / 3);
          if (currStampPage < maxStampPage) {
            $('.catStackImgs[minmaxUid='+minmaxUID+']').animate( {'left': '-=' + scrollWidth + 'px'}, 1000);
          } else {
            $('.catStackImgs[minmaxUid='+minmaxUID+']').css( {'left': '0'});
          }
          updatePageId('minmaxUid=' + minmaxUID, (currStampPage+1)%(maxStampPage+1), maxStampPage);
	}

      })
     ;
} else if (crit == 'price') {

  // load up the specified priceStack with thumbs whose min<price<max, and not on hold.
  // PUT ALL JEWELRY WORKs ON HOLD, or they will show here...

  function fillPriceStack(minmaxUid, minPrice, maxPrice) {
    var query = {
      'db': 'work',
      'select': 'row,code,bigImage,bigImageWidth,bigImageHeight,onHold,title,workList,price,media,size,detImageList',
      'where': 'price,<=,' + maxPrice,
      'where2': 'price,>=,' + minPrice,
      'dataTag': minmaxUid
    };
    $.getJSON('/ajax/load.pl', query, function(jsonData) {
      // get minmax from the first jsonData... the long way...
      var firstKey;
      for (var k in jsonData) {
        firstKey = k;
      }
      var minmaxUid = jsonData[firstKey].dataTag;

      var order = sortJsondataByPrice(jsonData);
      for (var i in order) {
        var elemIndex = order[i].elemIndex;
        var elemValue = order[i].elemValue;
        // center vertical & horizontal when scaled to a (scrollWidth x scrollWidth) space
        var scaledWidth = parseInt(thumbSize * (elemValue.bigImageWidth / elemValue.bigImageHeight));
        if (scaledWidth > thumbSize) {scaledWidth = thumbSize;}
        var scaledHeight = parseInt(thumbSize * (elemValue.bigImageHeight / elemValue.bigImageWidth));
        if (scaledHeight > thumbSize) {scaledHeight = thumbSize;}
        var classList = ((elemValue.onHold == '1') ? 'class="onHold"' : "");

        // title: the image's html caption when presented by lightbox; no single quotes allowed.
	var titleHtml = '';
	titleHtml += '<span class="title" style="margin-right:10px;">' + elemValue.title + '</span>';
	titleHtml += '<button onclick="toggleTitleDetails();">Show Details</button>';
	titleHtml += makeTitleDetailsDiv(elemValue);
	titleHtml += fillThumbContainer(elemValue.detImageList);

        var newElem = 
              '<a'
	      + ' href="images-work/' + elemValue.code + '-big.jpg"'
	      + " title='" + titleHtml + "'"
	      + '>'
          +   '<img db="work" ' + classList 
          +   ' src="images-work/' + elemValue.code + '-thumb.jpg"'
          +   ' style="'
          +     'padding: ' + parseInt((thumbSize - scaledHeight)/2.0) + 'px ' + parseInt((thumbSize - scaledWidth)/2.0) + 'px'
          +   ' ;"'
          +   ' title="' + elemValue.title + ' (' + formatPrice(elemValue.price) + ')"'
          +   '>'
          + '</a>';
        $('.catStackImgs[minmaxUid=' + elemValue.dataTag + ']').append(newElem);
      }
    })
  }

  $.getJSON('/ajax/load.pl',
    {
      'db': 'price'
    },
    function(jsonData) {
      var order = sortJsondataByDisplayOrder(jsonData);
      for (var i in order) {
        var elemIndex = order[i].elemIndex;
        var elemValue = order[i].elemValue;
        var classList = "catStack" + ((elemValue.onHold == '1') ? " onHold" : "");
        var newElem = 
              '<div class="' + classList + '"'
               + ' cat="' + elemIndex + '"'
               + '>'
            + ' <h4>'
            + '     <span db="price" col="title">' + elemValue.title + '</span>'
            + '     <span class="pageId">Page x of y</span>'
            + ' </h4>'
            + ' <a class="scrollLeftBox" minmaxUid="' + elemIndex + '">'
            + '   <img class="scrollLeft" src="left-arrow-semi-rd.gif">'
            + ' </a>'
            + ' <div class="catStackImgsHold">'
            + '   <div class="catStackImgs"'
              +     ' minmax="' + elemValue.min + ',' + elemValue.max + '"'
              +     ' minmaxUid="' + elemIndex + '"'
              +     ' style="width:10000px"></div>'
            + ' </div>'
            + ' <a class="scrollRightBox" minmaxUid="' + elemIndex + '">'
            + '   <img class="scrollRight" src="right-arrow-semi-rd.gif">'
            + ' </a>'
            + '</div>';
        $('#catHold').append(newElem);
        fillPriceStack(elemIndex, elemValue.min, elemValue.max);
      }
    });

} else if (crit == 'size') {

  // load up the specified sizeStack with thumbs whose min < size < max, and not on hold.

  function fillSizeStack(minmaxUid, minSize, maxSize) {
    var query = {
      'db': 'work',
      'select': 'row,code,bigImage,bigImageWidth,bigImageHeight,onHold,title,workList,size,media,price,detImageList',
      'where': 'size,<=,' + maxSize,
      'where2': 'size,>=,' + minSize,
      'maxsize': 1,
      'dataTag': minmaxUid
    };
    // WORKING HERE... CHANGE TO LOAD3 FOR TESTING
    $.getJSON('/ajax/load.pl', query, function(jsonData) {
      // get minmax from the first jsonData... the long way...
      var firstKey;
      for (var k in jsonData) {
        firstKey = k;
      }
      var minmaxUid = jsonData[firstKey].dataTag;

      var order = sortJsondataByPrice(jsonData);
      for (var i in order) {
        var elemIndex = order[i].elemIndex;
        var elemValue = order[i].elemValue;
        // center vertical & horizontal when scaled to a (scrollWidth x scrollWidth) space
        var scaledWidth = parseInt(thumbSize * (elemValue.bigImageWidth / elemValue.bigImageHeight));
        if (scaledWidth > thumbSize) {scaledWidth = thumbSize;}
        var scaledHeight = parseInt(thumbSize * (elemValue.bigImageHeight / elemValue.bigImageWidth));
        if (scaledHeight > thumbSize) {scaledHeight = thumbSize;}
        var classList = ((elemValue.onHold == '1') ? 'class="onHold"' : "");

        // title: the image's html caption when presented by lightbox; no single quotes allowed.
	var titleHtml = '';
	titleHtml += '<span class="title" style="margin-right:10px;">' + elemValue.title + '</span>';
	titleHtml += '<button onclick="toggleTitleDetails();">Show Details</button>';
	titleHtml += makeTitleDetailsDiv(elemValue);
        titleHtml += fillThumbContainer(elemValue.detImageList);

        var newElem = 
              '<a'
	      + ' href="images-work/' + elemValue.code + '-big.jpg"'
	      + " title='" + titleHtml + "'"
	      + '>'
          +   '<img db="work" ' + classList 
          +   ' src="images-work/' + elemValue.code + '-thumb.jpg"'
          +   ' style="'
          +     'padding: ' + parseInt((thumbSize - scaledHeight)/2.0) + 'px ' + parseInt((thumbSize - scaledWidth)/2.0) + 'px'
          +   ';"'
          +   " title='" + elemValue.title + ' (' + elemValue.size + ")'"
          +   '>';
          + '</a>';
        $('.catStackImgs[minmaxUid=' + elemValue.dataTag + ']').append(newElem);
      }
    })
  }

  // group the works by physical size: first make the catStack div's to hold each group,
  // then assign works to each one with fillSizeStack(). This 2-stage approach reduces
  // flashes because the big boxes are all made first, then filled as the work ajax completes.
  $.getJSON('/ajax/load.pl',
    {
      'db': 'size'
    },
    function(jsonData) {
      var order = sortJsondataByDisplayOrder(jsonData);
      for (var i in order) {
        var elemIndex = order[i].elemIndex;
        var elemValue = order[i].elemValue;
        var classList = "catStack" + ((elemValue.onHold == '1') ? " onHold" : "");
        var newElem = 
              '<div class="' + classList + '"'
               + ' cat="' + elemIndex + '"'
               + '>'
            + ' <h4>'
            + '     <span db="size" col="title">' + elemValue.title + '</span>'
            + '     <span class="pageId">Page x of y</span>'
            + ' </h4>'
            + ' <a class="scrollLeftBox" minmaxUid="' + elemIndex + '">'
            + '   <img class="scrollLeft" src="left-arrow-semi-rd.gif">'
            + ' </a>'
            + ' <div class="catStackImgsHold">'
            + '   <div class="catStackImgs"'
              +     ' minmax="' + elemValue.min + ',' + elemValue.max + '"'
              +     ' minmaxUid="' + elemIndex + '"'
              +     ' style="width:10000px"></div>'
            + ' </div>'
            + ' <a class="scrollRightBox" minmaxUid="' + elemIndex + '">'
            + '   <img class="scrollRight" src="right-arrow-semi-rd.gif">'
            + ' </a>'
            + '</div>';
        $('#catHold').append(newElem);
        fillSizeStack(elemIndex, elemValue.min, elemValue.max);
      }
    });
}
  $('#catHold').fadeIn('slow');
} // sortView

function toggleTitleDetails() {
  $("#titleDetails").toggle();
  return false;
}

$(document).ready(function () {

  if (typeof initQuicklink == "function") { initQuicklink(); }

  $('#loading')
    .ajaxStop( ajaxStopFunc ) ;

  $('.catStack')
    .addClass('ui-corner-all')
    .css({'height': miniHeight})
    ;

  $('#viewButtons').buttonset();
  $('#viewButtons input')
    .click( function() {
      sortView(this.id);
      return false;
    })
    ;
  sortView('category');	// default sort order

});