// MerchList.js    2009.10.05 by Joshua Holland  //
// (with adjustments for inSite Content Manager) //
//                                               //
// Place in a text module on the MerchList.aspx  //
// page, found through the following:            //
// Maintain > inSite pages > Merchandise pages   //
//                                               //
// Note: This uses the jQuery javascript library //

$(document).ready(function(){

// ********************************************* //
// The variable below sets the number of columns //
// that will be used in the merchandise table.   //
// Change this to whatever you would prefer.     //
//                                               //
// You can revert to the standard class display  //
// by setting the value of "columns" to "1".     //
// ********************************************* //

var columns = 4;

// ********************************************* //
// This next variable is a message to be shown   //
// in the event that the item has multiple price //
// points (gift card or other nonmerch code).    //
// Type whatever it is that you wish to display  //
// in between the quotation marks.  For best     //
// results this should not be more than a couple //
// of words in length.                           //
// ********************************************* //

var pricePointMsg = "";

// ********************************************* //
// You may also choose to style the MerchList    //
// display by clicking CSS > Custom Group.       //
// Elements are assigned the following classes:  //
//                                               //
// .myMTable                                     //
// Table container for the merchandise items.    //
//                                               //
// .mTableCell                                   //
// Class added to each cell containing an item.  //
//                                               //
// .mTableCellHover                              //
// Class added when hovering over a cell.        //
//                                               //
// a.mDescriptionLink:link   and                 //
// a.mDescriptionLink:visited                    //
// These are for the normal state of an item's   //
// short description links.                      //
//                                               //
// a.mDescriptionLink:active   and               //
// a.mDescriptionLink:hover                      //
// Controls hover state for description links.   //
//                                               //
// .mSKU                                         //
// Class added to all item SKU numbers.          //
//                                               //
// .mPriceFields                                 //
// Class added to all item price fields.         //
// Includes sale price for items on a web sale.  //
// ********************************************* //

// If "columns" is set to 1 or less, we're done //

if(columns > 1){

// Hide the existing merchandise display.         //

$("table[id*=dgMerch]").hide();

// Get page elements we want to use in our custom //
// merch table and place them into arrays.        //

var myMerchCellsArray = $('table[id*=hdrMerchandiseInfo]').parent();
var myArraySize = myMerchCellsArray.length;
var merchImage = $('input[id*=_Image]');
var merchDesc = $('a[id*=_MerchDesc]');
var merchSKU = $('span[id*=_LblSKU]');

// Create new merch table, add rows and cells //

var rowCount = 0;

// Create the table //

$('<table id="myMTable" class="myMTable"><tbody></tbody></table>').insertBefore('table[id*=dgMerch]');
for (var i=0; i < myArraySize; i += columns) {

// Create a row //

$('<tr id="myRow' + rowCount + '"></tr>').appendTo('#myMTable');
for (var j=0; (j < columns) && ( (i + j) < myArraySize); ++j) {

// Add cells to the row //
 
$('<td id="mcell' + (i + j) + '"></td>').appendTo("#myRow" + rowCount);
}
++rowCount;
}

// Now append the merch image, short description,  //
// and SKU number to our table cells.              //

jQuery.each(merchImage, function(i, val) {
$(val).appendTo("#mcell" + i);
$("<br />").appendTo("#mcell" + i);
});

jQuery.each(merchDesc, function(i, valD) {
$(valD).appendTo("#mcell" + i);
$("<br />").appendTo("#mcell" + i);
});

jQuery.each(merchSKU, function(i, valS) {
$(valS).appendTo("#mcell" + i);
$("<br /><br />").appendTo("#mcell" + i);

// Work with price fields //

// Get and format the numeric value within the price ID //

var j = i + 3;
var k = j;
if (k < 10) {
k = "0" + k;
}

// Set variables for sale prices //

var sale1ID = "dgMerch_ctl" + k + "_salePriceBlock_lbl1";
var sale2ID = "dgMerch_ctl" + k + "_salePriceBlock_lbl2";
var sale3ID = "dgMerch_ctl" + k + "_salePriceBlock_lbl3";

// Check to see if the first price span       //
// exists.  If so, append it.  If not then    //
// create it and append as empty span.        //

// This will be the only one available unless //
// the item is on a web sale.  The only way   //
// this span does not exist is if the item is //
// a nonmerch code using price points.        //

if ($('span[id*=' + sale1ID + ']').length > 0) {
$('span[id*=' + sale1ID + ']').appendTo("#mcell" + i);
$("<br />").appendTo("#mcell" + i);
} else {
$('<span id="' + sale1ID + '"><strong>' + pricePointMsg + '</strong></span>').appendTo("#mcell" + i);
}

// Check to see if a second price span exists //
// (a sale price).  If so, append it.  If not //
// then create it and append as empty span.   //

if ($('span[id*=' + sale2ID + ']').length > 0) {
$('span[id*=' + sale2ID + ']').appendTo("#mcell" + i);
$("<br />").appendTo("#mcell" + i);
} else {
$('<span id="' + sale2ID + '"></span>').appendTo("#mcell" + i);
}

// Do the same, only this time we're checking //
// for a third price span (sale price).       //

if ($('span[id*=' + sale3ID + ']').length > 0) {
$('span[id*=' + sale3ID + ']').appendTo("#mcell" + i);
$("<br />").appendTo("#mcell" + i);
} else {
$('<span id="' + sale3ID + '"></span>').appendTo("#mcell" + i);
}


// If the item has been added to the cart, //
// display a message and the check mark.   //

var isAdded = "dgMerch_ctl" + k + "_Imgcheck";

$('<br /><span id="itemIsAdded' + i + '"></span><span class="mAddedMsg" id="addedMessage' + i + '">Added to cart.</span>').appendTo("#mcell" + i).hide();

if ($('img[id*=' + isAdded + ']').length > 0) {
$('#itemIsAdded' + i).show();
$('img[id*=' + isAdded + ']').appendTo($('#itemIsAdded' + i));
$('#addedMessage' + i).show();
}


});


// Add classes to content to allow for CSS styling //

$("td[id^=mcell]").addClass("mTableCell");
$("td[id^=mcell]").hover(function() {
$(this).addClass('mTableCellHover');
}, function() {
$(this).removeClass('mTableCellHover');
});
$('a[id*=_MerchDesc]').addClass("mDescriptionLink");
$('span[id*=_LblSKU]').addClass("mSKU");
$('span[id*=_salePriceBlock]').addClass("mPriceFields");

// Append navigation, if present //

var navigationIndicator = $("table[id*=dgMerch] tr:last td input");
var navigationPresent = navigationIndicator.attr("alt");
if (navigationPresent == "<" || ">") {
$('<tr id="mTopNav"></tr>').insertBefore("#myRow0");
$('<tr id="mBottomNavHolder"><td colspan=' + columns +'><table><tbody><tr id="mBottomNav"></tr></tbody></table></td></tr>').insertAfter("#myMTable tr:last");

navigationIndicator.parent().parent().parent().parent().parent().clone().appendTo("#mTopNav");
$("#mTopNav td:first").attr("colSpan", columns);

navigationIndicator.parent().appendTo("#mBottomNav");

// Center the navigation //

$("#mTopNav td table").css("text-align", "center").css("margin-left", "auto").css("margin-right", "auto");
$("#mBottomNavHolder td table").css("text-align", "center").css("margin-left", "auto").css("margin-right", "auto");

}

}

});