AJAX help coding~

[yenfa]

Hello
I need to build an interactive shopping page for a client.
Now, what I need is an ajax/javascript coding..

What I need is similar to http://www.switchflops.com/cart/home.php?ctype=ballet

When you click a shoe image thumbnail, an image of the shoe will appear, and then when on the accessory thumbnail, the shoe image will change into a shoe with the accessory..

I need to know which codes/scripts I need to use...
Basically, I dont know what kind of script or snippet was used.. Or what it is called...

Does someone have an idea...?
Please share..

Thanks!

[yenfa]

this is the main code used for the js, I think...

var currShoe = 'none';
var prevShoe = 'none';
var currStrap = 'dflt';
var prevStrap = 'dflt';
var shoeCat = 'view all';
var strapCat = 'view all';
var loadedImgs = new Array();
var dfltDropBoxWidth = 42;
var handleHeight = 36;
var colPadding = 0;
var filterItems = {};
var postRegObj;
var needToAddStrap = false;
var cart = new Array();
var unableToAdd = false;

$(function() {
	if ($.browser.msie && $.browser.version == '6.0') {
		colPadding = 7;
	}

	$('div.colTopBox').each(function() {
		if ($(this).attr('_showing') == null) {
			$(this).attr('_showing', 'false');
		}
		$(this).attr('_height', $(this).height());
	});
	resizeColumns();

	$(window).resize(resizeColumns);

	if ($.browser.msie) {
		if ($.browser.version == '6.0') {
			$('#currentShoe1, #currentShoe2, #currentShoe3').wrap('<div></div>');
			$('#currentShoe1').attr('id', 'currShoeImg1').parent().attr('id', 'currentShoe1');
			$('#currentShoe2').attr('id', 'currShoeImg2').parent().attr('id', 'currentShoe2');
			$('#currentShoe3').attr('id', 'currShoeImg3').parent().attr('id', 'currentShoe3');
		}
		$('#currentShoe1, #currentShoe2, #currentShoe3').css({'background-color': '#ffffff', 'opacity': 0});
	}
	$('div.dropBox ul').hide();
	setTimeout(function() {$('div.dropBox ul').css('opacity', 1);}, 1000);
	$('div.dropBox').click(function(evt) {
		if ($(this).children('ul').css('display') == 'none') {
			hideDropBoxes(this.id);
			$(this).css('z-index', '2');
			var ul = $(this).children('ul');
			// if width is 0 then it is likely hidden inside another div, don't reset the width
			if (ul.width() < dfltDropBoxWidth && ul.width() != 0) {
				$(this).children('ul').width(dfltDropBoxWidth);
			}
			$(this).children('ul').slideDown(300);
		} else {
			hideDropBoxes(null, this.id);
		}
	}).mouseout(function(evt) {
		$(this).attr('_overCount', parseInt($(this).attr('_overCount')) - 1);
		clearTimeout($(this).attr('_hider'));
		if ($(this).attr('_overCount') <= 0) {
			$(this).attr({'_overCount': 0, '_hider': setTimeout('hideDropBoxes()', 1000)});
		}
	}).mouseover(function(evt) {
		$(this).attr('_overCount', parseInt($(this).attr('_overCount')) + 1);
		clearTimeout($(this).attr('_hider'));
		$(this).removeAttr('_hider');
	}).attr('_overCount', 0).each(function() {
		if ($.browser.msie) {
			$(this).trigger('click');
			hideDropBoxes();
		}
	});
	$('div.dropBox a').click(function(evt) {
		evt.preventDefault();
		evt.stopPropagation();
		var newVal = $(this).attr('_dropVal');
		if (newVal == null || newVal == '') {
			newVal = $(this).html();
		}
		var dropBox = $(this).parents('div.dropBox');
		dropBox.attr('_prevVal', dropBox.children('span.title').html());
		dropBox.children('span.title').html(newVal);
		hideDropBoxes(null, dropBox[0].id);
		// this little bit of code handles a callback of sorts to notify when
		// the value of the dropbox has changed
		if (dropBox.attr('_selFunc') != null) {
			eval('var func = ' + dropBox.attr('_selFunc'));
			func(dropBox);
		}
	})

	$('#shoeSquiggle, #strapSquiggle').each(function() {
		$(this).attr('_oldTop', $(this).position()['top']);
	})

	$('div.shopByCol').attr('_hilited', 'false').mouseover(function() {
		$(this).attr('_overCount', parseInt($(this).attr('_overCount')) + 1);
		clearTimeout($(this).attr('_hider'));
		$(this).removeAttr('_hider');
		if ($(this).children('div.shopByBody').height() == 0 && $(this).attr('_hilited') == 'false') {
			$(this).attr('_hilited', 'true').animate({'opacity': 1}, 300);
			if (this.id == 'shoeShopBy') {
				$('#shoeSquiggle').animate({'top': (parseInt($('#shoeSquiggle').attr('_oldTop')) + 12)}, 200);
			} else {
				$('#strapSquiggle').animate({'top': (parseInt($('#strapSquiggle').attr('_oldTop')) + 12)}, 200);
			}
		}
	}).mouseout(function() {
		$(this).attr('_overCount', parseInt($(this).attr('_overCount')) - 1);
		clearTimeout($(this).attr('_hider'));
		if ($(this).attr('_overCount') <= 0) {
			var timeout = 1500;
			if ($(this).children('div.shopByBody').height() == 0) {
				// should be a shorter timeout
				timeout = 250;
			}
			$(this).attr({'_overCount': 0, '_hider': setTimeout('hideShopBy("#' + this.id + '")', timeout)});
		}
	}).each(function() {$(this).attr('_overCount', 0);
	}).click(function(evt) {
		evt.preventDefault();
		evt.stopPropagation();
		if ($(this).children('div.shopByBody').height() == 0) {
			if ($.browser.msie && $.browser.version == '7.0') {
				$(this).animate({'height': $('#shoeCol').height() + 42}, 450);
			}
			$(this).children('div.shopByBody').animate({'opacity': 1, 'height': $('#shoeCol').height() + 2}, 500,
				function() {$(this).children('div.shopBottom').css('display', 'block');});
			$('#' + this.id + ' span.shopDrop').addClass('shopClose').removeClass('shopDrop');
			var squigId = '#shoeSquiggle';
			if (this.id == 'strapShopBy') {
				squigId = '#strapSquiggle';
			}
			$(squigId).animate({'top': $('#shoeCol').height() + 40}, 700);
		} else {
			hideShopBy('#' + this.id, true);
		}
	}).css('opacity', 0);
	$('#shopBySearch').click(function(evt) {
		evt.preventDefault();
		evt.stopPropagation();
	});
	$('#shoeShopBody .fltrOpt').click(function(evt) {
		var fname = $(this).attr('_filter');
		$('#shoeFilterName span.shopByLabel, #shoeFilter span.shopByLabel').html(fname);
		$.getScript(location.protocol + '//' + location.hostname + $(this).attr('href') + '&js=true&fltr=shoe' + escape(fname), function() {
			// doing this timeout for good ol' frizari
			setTimeout('filterList("shoe", "shoe' + fname + '")', 50);
		});
	});
	$('#strapShopBody .fltrOpt').click(function(evt) {
		var fname = $(this).attr('_filter');
		$('#strapFilterName span.shopByLabel, #strapFilter span.shopByLabel').html(fname);
		$.getScript(location.protocol + '//' + location.hostname + $(this).attr('href') + '&js=true&fltr=strap' + escape(fname), function() {
			// doing this timeout for good ol' frizari
			setTimeout('filterList("strap", "strap' + fname + '")', 50);
		});
	});
	$('#strapShopBody').each(function() {
		// doing this inside as a sort of conditional check
		$('#shoesStraps .fltrOpt, #forKids .fltrOpt').click(function(evt) {
			var fname = $(this).attr('_filter');
			$('#strapFilterName span.shopByLabel, #strapFilter span.shopByLabel').html(fname);
			$.getScript(location.protocol + '//' + location.hostname + $(this).attr('href') + '&js=true&fltr=strap' + escape(fname), function() {
				// doing this timeout for good ol' frizari
				setTimeout('filterList("strap", "strap' + fname + '")', 50);
			});
		})
	});
	$('#saveToFavs').mouseover(function(evt) {
		$(this).attr('_overCount', parseInt($(this).attr('_overCount')) + 1);
		clearTimeout($(this).attr('_hider'));
		$(this).children('span').animate({'opacity': 1}, 300);
	}).mouseout(function(evt) {
		$(this).attr('_overCount', parseInt($(this).attr('_overCount')) - 1);
		clearTimeout($(this).attr('_hider'));
		if (parseInt($(this).attr('_overCount')) <= 0) {
			$(this).attr('_overCount', 0);
			$(this).attr('_hider', setTimeout(hideSave, 250));
		}
	}).attr({'_overCount': 0, '_dragging': 'false'}).css('opacity', 0);

	$('#shoeThumbFull, #shoeThumbHoriz').click(function(evt) {
		evt.preventDefault();
		evt.stopPropagation();
		if (currStrap == 'dflt') {
			toggleAltShoe();
		}
	}).css('opacity', 0);

	$('a.addItem').click(function(evt) {
		evt.preventDefault();
		evt.stopPropagation();
		var id = 0;
		var size = '';
		var qty = '';
		if (this.id == 'addShoe') {
			startWorking(this);
			id = shoes[currShoe]['pid'];
			size = $('#shoeSize span.title').text();
			size = (size == 'KL' ? 'Large' : (size == 'KM' ? 'Medium' : (size == 'KXL' ? 'X-Large' : (size == 'KS' ? 'Small' : size))));
			qty = $('#shoeQty span.title').text();
		} else if (this.id == 'addAccessory') {
			id = $(this).attr('_id');
			size = 'accessory';
			qty = $('#accessoryQty span.title').text();
			hideAccessoriesPopup();
		} else {
			startWorking(this);
			id = straps[currStrap]['pid'];
			size = $('#strapSize span.title').text();
			size = (size == 'L' ? 'Large' : (size == 'M' ? 'Medium' : (size == 'KL' ? 'Large' : (size == 'KM' ? 'Medium' : 'Small'))));
			qty = $('#strapQty span.title').text();
		}
		$.getScript(location.protocol + '//' + location.hostname + rootDir + 'cart/modules/Lulu_Custom/cart.php?mode=add&productid=' + id + '&psize=' + size + '&amount=' + qty, function() {
			setTimeout(updateCartGlance, 10);
			hideWorking();
		})
	});

	// setup position of the drag handle.  I know I could do this above, but it seems to cause a pause
	// in the display of the page, so I'm putting it here to get everything on the page first
	$('div.colTopBox').each(function() {
		if ($(this).attr('_showing') == 'true') {
			var colScroll = $(this).parent().children('div.colScroll');
			colScroll.css('top', colScroll.position()['top'] + $(this).height());
		}
	});

	$('input.dfltText').each(function() {
		$(this).attr('_dfltText', $(this).val());
	}).focus(function(evt) {
		if ($(this).val() == $(this).attr('_dfltText')) {
			$(this).val('');
		}
	}).blur(function(evt) {
		if ($.trim($(this).val()) == '') {
			$(this).val($(this).attr('_dfltText'));
		}
	});

	$('.myFavLink').click(function(evt) {
		if (!$(this).hasClass('myFavoritesTitle')) {
			evt.preventDefault();
			evt.stopPropagation();
		}
		favLinkClicked(this);
	});
	$('a.regPopClose').click(function(evt) {
		hidePopup(evt);
		hideWorking();
	})
	$('#popSignIn').click(function(evt) {
		evt.preventDefault();
		evt.stopPropagation();
		startWorking(this);
		loginUser($('#popUname'), $('#popPasswd'));
	});
	$('#regPopBtn').click(function(evt) {
		evt.preventDefault();
		evt.stopPropagation();
		startWorking(this);
		registerUser('pop');
	});
	setTimeout(function() {setupColumnList('shoe');}, 500);
	setTimeout(function() {setupColumnList('strap');}, 500);
	checkChangedHash();
	$('a.popup').click(popitup);

	$('#shoeDrag').attr('_timer', setTimeout(function() {animDrag($('#shoeDrag'));}, 3000));
	$('#strapDrag').attr('_timer', setTimeout(function() {animDrag($('#strapDrag'));}, 3000));

	// x-cart does this thing where it converts extended chars to their html entities but we need
	// the literal character
	if (typeof(currency) != 'undefined' && currency == '&#8356;') currency = '₤';

	$('#viewNewAll').click(function() {
		$('a.newArrivalsTitle').trigger('click');
		return false;
	});

});

function resizeColumns() {
	var diffHeight = calcDiffHeight();
	$('div.col').height(484 + diffHeight).each(function() {
		var topBox = $(this).children('div.colTopBox');
		var infoDiff = topBox.attr('_showing') == 'true' ? parseInt(topBox.attr('_height')) : 0;
		$(this).children('div.colContainer').height(484 + diffHeight + colPadding - infoDiff);
		$(this).children('div.colScroll').height(476 + diffHeight - colPadding - infoDiff);
	});
	recalcScrolls();
}
// default calculation for getting the difference height to the minimum of the column height
// other js files may override this to get a different value
function calcDiffHeight() {
	var winHeight = $(window).height();
	if (winHeight < 630) {
		winHeight = 630;
	}
	return winHeight - 630;
}
// pass in a specific column (jquery wrapped) if only a specific scrollbar should be recalculated
function recalcScrolls(column) {
	if (column == null) {
		column = $('div.col');
	}
	column.each(function() {
		var container = $(this).children('div.colContainer');
		var colList = container.children('div.colList');
		var maxShoe = -(colList.height() - container.height());
		var colScroll = $(this).children('div.colScroll');
		if (maxShoe > 0) {
			// the list is shorter than the container
			colScroll.children('div.colHandle').css('top', 0);
			// just a dummy check, make sure the list is scrolled to the top
			colList.css('top', 0);
		} else if (colList.position()['top'] < maxShoe) {
			colList.css('top', maxShoe);
			colScroll.children('div.colHandle').css('top', (colScroll.height() - handleHeight));
		} else {
			colScroll.children('div.colHandle').css('top', (colScroll.height() - handleHeight) * (colList.position()['top'] / maxShoe));
		}
	});
}
function flick(id) {
	if (id == null) {
		id = 'div.col';
	}
	$(id).each(function() {
		var container = $(this).children('div.colContainer');
		var colList = container.children('div.colList');
		var colHandle = $(this).children('div.colScroll').children('div.colHandle');
		colList.draggable({'axis': 'y', 'distance': 5,
			'start': function(e, ui) {
				$(this).attr('maxHeight', -($(this).height() - $(this).parent().height() + 55));
				$(this).attr('prevY', 0);
				$(this).attr('distance', $(this).position()['top']);
				var colScroll = $(this).parents('div.col').children('div.colScroll');
				$(this).attr('scrollMax', colScroll.height() - handleHeight);
				if (this.id.substring(0, 4) == 'shoe') {
					clearTimeout($('#shoeDrag').attr('_timer'));
					$('#shoeDrag').stop().remove();
				} else if (this.id.substring(0, 5) == 'strap') {
					clearTimeout($('#strapDrag').attr('_timer'));
					$('#strapDrag').stop().remove();
				}
			},
			'drag': function(e, ui) {
				var jThis = $(this);
				var thisTop = $(this).position()['top'];
				jThis.attr('flick', 'true');
				var jHandle = jThis.parents('div.col').children('div.colScroll').children('div.colHandle');
				var scrollHeight = jThis.attr('scrollMax');
				var handleTop = (thisTop / jThis.attr('maxHeight')) * scrollHeight;
				if (handleTop > scrollHeight) {
					handleTop = scrollHeight;
				} else if (handleTop < 0) {
					handleTop = 0;
				}
				jHandle.css('top', handleTop);
			},
			'stop': function(e, ui) {
				var currTop = $(this).position()['top'];
				var maxHeight = parseInt($(this).attr('maxHeight'));
				if (currTop > 0 || currTop < maxHeight) {
					// need to bump back to within its limits
					var moveTo = maxHeight;
					if (currTop > 0) {
						moveTo = 0;
					}
					$(this).animate({'top': moveTo}, 500, 'easeOutExpo', function() {
						$(this).attr('flick', 'false');
					});
				} else {
					var id = this.id;
					setTimeout(function() {
						$('#' + id).attr('flick', 'false');
					}, 10);
				}
		}}).attr('flick', 'false');
		colHandle.draggable({'axis': 'y', 'containment': 'parent',
			'start': function(e, ui) {
				var container = $(this).parents('div.col').children('div.colContainer');
				var colList = container.children('div.colList');
				// 55 is in there to help the scroll function properly so it shows the entire
				// shoe at the bottom of the scrolling
				colList.attr('maxHeight', -(colList.height() - (container.height() - 55)));
				$(this).attr('_dragging', 'true');
				if (this.id.substring(0, 4) == 'shoe') {
					clearTimeout($('#shoeDrag').attr('_timer'));
					$('#shoeDrag').stop().remove();
				} else if (this.id.substring(0, 5) == 'strap') {
					clearTimeout($('#strapDrag').attr('_timer'));
					$('#strapDrag').stop().remove();
				}
			},
			'drag': function(e, ui) {
				var colScroll = $(this).parent();
				var colList = colScroll.parent().children('div.colContainer').children('div.colList');
				colScroll.attr('dragged', 'true');
				var handleTop = $(this).position()['top'];
				var posPct = handleTop / (colScroll.height() - handleHeight);
				posPct = (posPct > 1 ? 1 : (posPct < 0 ? 0 : posPct));
				colList.css('top', colList.attr('maxHeight') * posPct);
			},
			'stop': function(e, ui) {
				if (parseInt($(this).attr('_overCount')) == 0) {
					clearTimeout($(this).attr('_hider'));
					$(this).attr('_dragging', 'false');
				} else {
					clearTimeout($(this).attr('_hider'));
					$(this).attr('_dragging', 'false');
				}
			}
		});

	});
}

function animDrag(id) {
	// yeah, yeah I know I can do this recursively
	$(id).animate({'top': 74}, 1000, 'easeOutQuad', function() {
		$(id).animate({'top': 184}, 200, 'easeOutQuad', function() {
			$(id).animate({'top': 74}, 600, 'easeOutQuad', function() {
				$(id).animate({'top': 184}, 300, function() {
					$(id).attr('_timer', setTimeout(function() {
						animDrag(id);
					}, 3000));
				});
			})
		});
	});
}
function updateShoe() {
	if (currShoe != prevShoe && currShoe != 'none') {
		// do info box stuff and hiliter
		$('#shoeTitle').html($('#' + currShoe).text());
		var jsShoe = shoes[currShoe];
		$('#shoeDesc').html(jsShoe['desc']);
		$('#shoePrice').html(currency + jsShoe['price']);
		prevShoe = currShoe;
		$('#shoeHiliter').each(function() { 
			$(this).css('opacity', 0).children('span').css('opacity', 0);
		}).css('top', parseInt($('#' + currShoe).position()['top']) + 25)
		.animate({'opacity': 1}, 300, function() {
			$(this).children('span').animate({'opacity': 1}, 300, function() {
				$(this).animate({'opacity': 0}, 300);
			});
			$('#shoeTitleHilite').animate({'opacity': 1}, 300, function() {
				$(this).animate({'opacity': 0}, 300);
			})
		});
		ensureVisible('shoe');
	}
	if (currStrap != prevStrap && currStrap != 'dflt') {
		// do info box stuff and hiliter
		$('#strapTitle').html($('#' + currStrap).text());
		var jsStrap = straps[currStrap];
		$('#strapDesc').html(jsStrap['desc']);
		$('#strapPrice').html(currency + jsStrap['price']);
		prevStrap = currStrap;
		$('#strapHiliter').each(function() {
			$(this).css('opacity', 0).children('span').css('opacity', 0);
		}).css('top', parseInt($('#' + currStrap).position()['top']) + 35)
		.animate({'opacity': 1}, 300, function() {
			$(this).children('span').animate({'opacity': 1}, 300, function() {
				$(this).animate({'opacity': 0}, 300);
			});
			$('#strapTitleHilite').animate({'opacity': 1}, 300, function() {
				$(this).animate({'opacity': 0}, 300);
			})
		});
		ensureVisible('strap');
	} else if (currStrap == 'dflt' && currStrap != prevStrap) {
		prevStrap = currStrap;
	}
	if (currShoe == 'none') {
		// no shoe selected, just return
		return;
	}
	if ($('#instructions').css('display') != 'none') {
		$('#instructions').animate({'opacity': 0}, 500, function() {
			$(this).css('display', 'none');
		});
		$('#viewNewAll').hide();
		$('#loading').animate({'opacity': 1}, 500);
	}
	var newShoe = '#currentShoe2';
	var oldShoe = '#currentShoe1';
	if ($('#currentShoe1').attr('_showing') == 'false') {
		newShoe = '#currentShoe1';
		oldShoe = '#currentShoe2';
	}
	
	var shoeName = currStrap + '_' + currShoe;
	var imgPath = location.protocol + '//switchflops.chocolatepocketl.netdna-cdn.com/images/full/' + shoeName + '.png';
	loadAndDisplayImage(shoeName, imgPath, function() {
		displayShoe(newShoe, imgPath);
	});
	if (currStrap == 'dflt') {
		setupAltShoeViewer();
	} else {
		hideAltShoeViewer();
	}

	$(oldShoe + ', #currentShoe3').attr('_showing', 'false').css('z-index', 0).animate({'opacity': 0}, 500);
}
function loadAndDisplayImage(id, imgPath, dispFunc) {
	if ($.inArray(id, loadedImgs) == -1) {
		loadedImgs.push(id);
		var img = new Image();
		$(img).load(function() {
			dispFunc();
		}).attr('src', imgPath);
	} else {
		dispFunc();
	}

}
function displayShoe(shoeImg, path) {
	if ($.browser.msie && $.browser.version == '6.0') {
		// IE 6 of course doesn't work with PNG alpha channels except through background image filters
		// so this has to be done
		$(shoeImg).css({'z-index': 1, 'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + path + '",sizingMethod="crop")',
			'opacity': 0}).attr('_showing', 'true').animate({'opacity': 1}, 500);
	} else {
		$(shoeImg).attr({'_showing': 'true', 'src': path}).animate({'opacity': 1}, 500).css('z-index', 1);
	}
	if ($('#saveToFavs').css('opacity') == '0') {
		$('#saveToFavs').animate({'opacity': 1}, 500);
		$('#instructions').animate({'opacity': 0}, 500);
		$('#viewNewAll').hide();
	}
}
function showTopBox(id, callBack) {
	var colTopBox = $(id).children('div.colTopBox');
	if (colTopBox.attr('_showing') == 'false') {
		colTopBox.attr('_showing', 'true');
		var boxHeight = parseInt(colTopBox.attr('_height'));
		colTopBox.slideDown(500);
		var container = $(id).children('div.colContainer');
		var colScroll = $(id).children('div.colScroll');
		container.animate({'height': container.height() + colPadding - boxHeight}, 500, function() {
			callBack();
			recalcScrolls($(id));
		});
		$(id).children('div.colDrag').remove();
		colScroll.css('top', colScroll.position()['top'] + boxHeight).height(colScroll.height() - boxHeight);
	}
}
function hideTopBox(id, callBack) {
	var colTopBox = $(id).children('div.colTopBox');
	if (colTopBox.attr('_showing') == 'true') {
		colTopBox.attr('_showing', 'false');
		var boxHeight = parseInt(colTopBox.attr('_height'));
		colTopBox.slideUp(500);
		var container = $(id).children('div.colContainer');
		var colScroll = $(id).children('div.colScroll');
		var newContHeight = container.height() + boxHeight - colPadding;
		container.animate({'height': newContHeight}, 500, callBack);
		colScroll.css('top', colScroll.position()['top'] - boxHeight).height(colScroll.height() + boxHeight);
		// check that the list doesn't get squished up too high when closing, else bring down
		var colList = container.children('div.colList');
		if (-colList.position()['top'] + newContHeight + 25 > colList.height()) { // 25 is the padding that doesn't show up in the height
			var newListTop = newContHeight - 50 - colList.height();
			colList.animate({'top': newListTop}, 500, function() {
				recalcScrolls($(id));
			});
		}
	}
}
function hideDropBoxes(exceptFor, forceClose) {
	$('div.dropBox').each(function() {
		if (this.id == forceClose || (this.id != exceptFor && parseInt($(this).attr('_overCount')) <= 0)) {
			var id = this.id;
			$(this).css('z-index', '1').children('ul').slideUp(300, function() {$('#' + id).css('z-index', '0');});
		}
	})
}
function hideShopBy(id, forceClose) {
	if (parseInt($(id).attr('_overCount')) <= 0 || forceClose) {
		var squigId = '#shoeSquiggle';
		if (id == '#strapShopBy') {
			squigId = '#strapSquiggle';
		}
		if ($(id).children('div.shopByBody').height() == 0) {
			$(id).attr('_hilited', 'false').animate({'opacity': 0}, 300);
			$(squigId).animate({'top': $(squigId).attr('_oldTop')}, 200);
		} else {
			if ($.browser.msie && $.browser.version == '7.0') {
				$(id).animate({'height': 0}, 500);
			}
			$(id).children('div.shopByBody').animate({'opacity': 0, 'height': 0}, 500, 'easeInQuint')
				.children('div.shopBottom').css('display', 'none');
			$(id + ' span.shopClose').addClass('shopDrop').removeClass('shopClose');
			if (forceClose != null) {
				$(squigId).animate({'top': parseInt($(squigId).attr('_oldTop')) + 12}, 800, function() {
					if (parseInt($(id).attr('_overCount')) == 0) {
						$(id).attr('_hilited', 'false').animate({'opacity': 0}, 500);
						$(squigId).animate({'top': $(squigId).attr('_oldTop')}, 200);
					}
				});
			} else {
				$(squigId).animate({'top': $(squigId).attr('_oldTop')}, 500, function() {
					if (parseInt($(id).attr('_overCount')) == 0) {
						$(id).attr('_hilited', 'false').animate({'opacity': 0}, 500);
					}
				});
			}
		}
	}
}
function hideSave() {
	if (parseInt($('#saveToFavs').attr('_overCount')) == 0) {
		$('#saveToFavs span').animate({'opacity': 0}, 300);
	}
}
// just make sure that the clicked on item is visible in its respective column
function ensureVisible(type) {
	var item = $('#' + (type == 'shoe' ? currShoe : currStrap));
	var container = $('#' + type + 'Container');
	scrollToItem(item, container);
}
// function to scroll a list to where a particular item is in it, just pass the
// jquery wrapped item and the column container it is within.
function scrollToItem(item, container) {
	var list = $(container).children('div.colList');
	var listTop = list.position()['top'];
	var itemTop = item.position()['top'];
	if (itemTop + listTop - 20 < 0) {
		list.animate({'top': listTop - (itemTop + listTop - 20)}, 300); // 20 is to give it a slight padding above the item
	} else if (itemTop + listTop + item.height() + 20 > container.height()) {
		list.animate({'top': listTop - (itemTop + listTop + item.height() - container.height() + 20)}, 300); // 20 is t give it a slight padding below the item
	}
}
function setupAltShoeViewer() {
	var setupFunc = function() {
		var imgId = currStrap + '_' + currShoe;
		$('#shoeThumbFull').attr('src', 'http://switchflops.chocolatepocketl.netdna-cdn.com/images/thumbs/' + imgId + '.png');
		var imgPath = 'http://switchflops.chocolatepocketl.netdna-cdn.com/images/thumbs/' + imgId + '34.png';
		loadAndDisplayImage(imgId + '_thumb34', imgPath, function() {
			$('#shoeThumbHoriz').attr('src', imgPath).animate({'opacity': 1}, 500).attr('_showing', 'true');
		});
	};
	// make sure the old alt view is hidden if visible
	if (hideAltShoeViewer()) {
		setTimeout(setupFunc, 500);
	} else {
		setupFunc();
	}
}
function hideAltShoeViewer() {
	var hiding = false;
	if ($('#shoeThumbFull').attr('_showing') == 'true') {
		hiding = true;
		$('#shoeThumbFull').animate({'opacity': 0}, 500).attr('_showing', 'false');
	} else {
		$('#shoeThumbFull').css('opacity', 0).attr('_showing', 'false');
	}
	if ($('#shoeThumbHoriz').attr('_showing') == 'true') {
		hiding = true;
		$('#shoeThumbHoriz').animate({'opacity': 0}, 500).attr('_showing', 'false');
	} else {
		$('#shoeThumbHoriz').css('opacity', 0).attr('_showing', 'false');
	}
	return hiding;
}
function toggleAltShoe() {
	var showThumb = '#shoeThumbHoriz';
	var hideThumb = '#shoeThumbFull';
	var newShoe = '#currentShoe3';
	var shoeName = currStrap + '_' + currShoe;
	var imgPath = 'http://switchflops.chocolatepocketl.netdna-cdn.com/images/full/' + currStrap + '_' + currShoe;
	if ($('#shoeThumbFull').attr('_showing') == 'false') {
		// show the horizontal image
		shoeName += '34';
		imgPath += '34.png';
		$('#currentShoe1, #currentShoe2').css('z-index', 0).animate({'opacity': 0}, 500);
	} else {
		imgPath += '.png';
		$('#currentShoe3').css('z-index', 0).animate({'opacity': 0}, 500);
		showThumb = '#shoeThumbFull';
		hideThumb = '#shoeThumbHoriz';
		newShoe = '#currentShoe1';
	}
	loadAndDisplayImage(shoeName, imgPath, function() {
		displayShoe(newShoe, imgPath);
	})
	$(showThumb).animate({'opacity': 0}, 500).attr('_showing', 'false');
	$(hideThumb).animate({'opacity': 1}, 500).attr('_showing', 'true');
}
function setupColumnList(listName) {
	// setup the items in the shoe list
	$('#' + listName + 'List a.shoeThumb').click(function(evt) {
		if ($(this).parent()[0].id == 'shoeList' && $('#shoeList').attr('flick') == 'false') {
			currShoe = this.id;
			currStrap = 'dflt';
			updateHash();
			showTopBox('#shoeCol', function() {
				ensureVisible('shoe');
			});
			updateShoe();
			hideTopBox('#strapCol', function() {
				$('#strapHiliter').css('top', -27);
			});
			logView('prod');

			// need to check on half sizes for snap shoes
			if (this.id.match('^jordi')) {
				$('#shoeSizeDrop li.halfSize').hide();
			} else {
				$('#shoeSizeDrop li.halfSize').show();
			}

		}
		evt.preventDefault();
		evt.stopPropagation();
	});
	// setup the items in the strap list
	$('#' + listName + 'List a.strapThumb').click(function(evt) {
		if ($(this).parent()[0].id == 'strapList' && $('#strapList').attr('flick') == 'false') {
			currStrap = this.id;
			updateHash();
			showTopBox('#strapCol', function() {
				ensureVisible('strap');
			});
			updateShoe();
			logView('prod');
		}
		evt.preventDefault();
		evt.stopPropagation();
	})
	flick('#' + listName + 'Col');
}
function logView(type) {
	var urlArgs = '?type=' + type;
	var url = location.protocol + '//' + location.hostname + rootDir + 'cart/modules/Lulu_Custom/stats.php';

	if (type == 'prod') {
		if (currShoe != 'none') {
			urlArgs += '&shoeid=' + shoes[currShoe]['pid'];
		} else {
			urlArgs += '&shoeid=0';
		}
		if (currStrap != 'dflt') {
			urlArgs += '&strapid=' + straps[currStrap]['pid'];
		} else {
			urlArgs += '&strapid=0';
		}
	}
	// just give the main focus, displaying shoes, some breathing room first, and spin this
	// off for 1/10 of a second
	setTimeout(function() {
		// log to x-cart's stats
//		$('#statsImg').attr('src', url + urlArgs);
//		$.ajax({'url': url + urlArgs, 'dataType': 'text'});
		// log to google analytics
		urchinTracker(rootDir + 'cart/home.php' + urlArgs);
	}, 100);
}
function filterList(id, filter) {
	if (id == 'strap') {
		if (filter == strapCat) {
			return;
		} else {
			strapCat = filter;
		}
	} else {
		if (filter == shoeCat) {
			return;
		} else {
			shoeCat = filter;
		}
	}
	var items = shoes;
	var currItem = currShoe;
	if (filter == id + 'view all') {
		updateHash();
		// just loop through the list and show all
		$('#' + id + 'List a.' + id  + 'Thumb').each(function() {
			$(this).slideDown(350);
		});
		$('#' + id + 'List').animate({'top': 0}, 400);
		setTimeout('moveHiliter("' + id + '")', 360);
		return;
	} else if (id == 'strap') {
		items = straps;
		currItem = currStrap;
	}
	var fltrList = filterItems[filter];
	for (var x in items) {
		var found = false;
		for (var y in fltrList) {
			if (fltrList[y] == items[x]['pid']) {
				found = true;
				fltrList.splice(y, 1);
				break;
			}
		}
		if (found) {
			$('#' + items[x]['id']).slideDown(350);
		} else {
			$('#' + items[x]['id']).slideUp(350);
			if (items[x]['id'] == currItem) {
				// need to hide the selection
				if (id == 'shoe') {
					currShoe = 'none';
					currStrap = 'dflt';
					hideTopBox('#shoeCol', function() {
						$('#shoeHiliter').css('top', -27);
					});
					resetMiddle();
				} else {
					currStrap = 'dflt';
				}
				updateShoe();
				hideTopBox('#strapCol', function() {
					$('#strapHiliter').css('top', -27);
				});
				$('#' + id + 'List').animate({'top': 0}, 400);
			}
		}
	}
	updateHash();
	setTimeout('recalcScrolls($("#' + id + 'Col"))', 360);
	setTimeout('moveHiliter("' + id + '")', 360);
}
function moveHiliter(id) {
	if (id == 'shoe' && currShoe != 'none') {
		// need to reset the hiliter to the correct position
		$('#shoeHiliter').css('top', parseInt($('#' + currShoe).position()['top']) + 25)
		ensureVisible(id);
	} else if (currStrap != 'dflt') {
		// need to reset the hiliter to the correct position
		$('#strapHiliter').css('top', parseInt($('#' + currStrap).position()['top']) + 25)
		ensureVisible(id);
	}
}
function updateCartGlance() {
	if (unableToAdd) {
		unableToAdd = false;
		return;
	}
	if (cart['item_count'] == 0) {
		$('#bagCount').html('no items');
	} else if (cart['item_count'] == 1) {
		$('#bagCount').html('1 style');
	} else {
		$('#bagCount').html(cart['item_count'] + ' styles');
	}
	$('#bagCount').animate({'backgroundColor': '#76644a', 'color': '#ffffff'}, 200, function() {
		$(this).animate({'backgroundColor': '#ffffff', 'color': '#76644a'}, 800);
	});
}
function updateHash() {
	location.replace('#shoe=' + currShoe + '&strap=' + currStrap);
}
function checkChangedHash() {
	if (location.hash == '') {
		return;
	}
	var rawHash = location.hash.substring(1).split('&');
	var changedProduct = false;
	for (var x in rawHash) {
		var pair = rawHash[x].split('=');
		if (pair[0] == 'shoe') {
			if (pair[1] != currShoe) {
				currShoe = pair[1];
				currStrap = 'dflt';
				changedProduct = true;
				filterList('shoe', 'view all');
			}
		} else if (pair[0] == 'strap') {
			if (pair[1] != currStrap) {
				currStrap = pair[1];
				changedProduct = true;
				filterList('strap', 'view all');
			}
		}
	}
	if (changedProduct) {
		updateShoe();
		if (currStrap == 'dflt') {
			hideTopBox('#strapCol', function() {
				$('#strapHiliter').css('top', -27);
			});
		} else {
			showTopBox('#strapCol', function() {
				ensureVisible('strap');
			});
		}
		if (currShoe == 'none') {
			hideTopBox('#shoeCol', function() {
				$('#shoeHiliter').css('top', -27);
			});
			resetMiddle();
		} else {
			showTopBox('#shoeCol', function() {
				ensureVisible('shoe');
			});
			// let's just make sure the hiliter is properly placed
			setTimeout(function() {
				$('#shoeHiliter').css('top', parseInt($('#' + currShoe).position()['top']) + 25)
			}, 500);
		}
		logView('prod');
	}
}
function resetMiddle() {
	$('#currentShoe1, #currentShoe2, #currentShoe3').attr('_showing', 'false').css('z-index', 0).animate({'opacity': 0}, 500);
	$('#instructions').animate({'opacity': 1}, 500).css('display', 'block');
	$('#viewNewAll').show();
	$('#shoeThumbFull, #shoeThumbHoriz, #saveToFavs, #loading').animate({'opacity': 0}, 500);
}
function favLinkClicked(link) {
	startWorking(link);
	if (!loggedIn) {
		// not logged in, show the login dialog
		postRegObj = link;
		showLogin();
	} else {
		// user is logged in, determine what to do
		if (link.id == 'saveToFavs') {
			var id = shoes[currShoe]['pid'];
			var size = $('#shoeSize span.title').text();
			var qty = $('#shoeQty span.title').text();
			var postVars = {'productid': id, 'psize': size, 'amount': qty, 'mode': 'add2wl'};
			var strapItems = '';
			var strapId = '';
			var strapSize = '';
			var strapQty = '';
			if (currStrap != 'dflt') {
				strapId = straps[currStrap]['pid'];
				postVars['strapid'] = strapId;
				strapSize = $('#strapSize span.title').text();
				strapSize = (strapSize == 'L' ? 'Large' : (strapSize == 'M' ? 'Medium' : (strapSize == 'KL' ? 'Large' : (strapSize == 'KM' ? 'Medium' : 'Small'))));
				strapQty = $('#strapQty span.title').text();
			}
			$.post(rootDir + 'cart/modules/Lulu_Custom/cart.php', postVars, function(data) {
				eval(data);
				if (needToAddStrap) {
					needToAddStrap = false;
					postVars = {'productid': strapId, 'psize': strapSize, 'amount': strapQty, 'mode': 'add2wl'};
					$.post(rootDir + 'cart/modules/Lulu_Custom/cart.php', postVars, function(data) {
						eval(data);
						setTimeout(updateCartGlance, 10);
						hideWorking();
						showMessage('Added to favorites.');
					})
				} else {
					setTimeout(updateCartGlance, 10);
					hideWorking();
					showMessage('Added to favorites.');
				}
			})
		} else {
			var fname = $(link).attr('_filter');
			// TODO Generalize this code so it can be used here and in filterList()
			var type;
			var prodList;
			var currItem;
			if ($(link).parents('div.col').attr('id') == 'shoeCol') {
				// filter on my favs for the shoes
				prodList = $('#shoeList a.shoeThumb');
				type = 'shoe';
				currItem = currShoe;
				$('#shoeFilterName span.shopByLabel, #shoeFilter span.shopByLabel').html(fname);
			} else {
				// filter on my favs for the straps
				prodList = $('#strapList a.strapThumb');
				type = 'strap';
				currItem = currStrap;
				$('#strapFilterName span.shopByLabel, #strapFilter span.shopByLabel').html(fname);
			}
			prodList.each(function() {
				var found = false;
				for (var x in wishlist) {
					if (wishlist[x]['id'] == this.id) {
						found = true;
						break;
					}
				}
				if (found) {
					$(this).slideDown(350);
				} else {
					$(this).slideUp(350);
					if (this.id == currItem) {
						// need to hide the selection
						if (type == 'shoe') {
							currShoe = 'none';
							currStrap = 'dflt';
							hideTopBox('#shoeCol', function() {
								$('#shoeHiliter').css('top', -27);
							});
							resetMiddle();
						} else {
							currStrap = 'dflt';
						}
						updateShoe();
						hideTopBox('#strapCol', function() {
							$('#strapHiliter').css('top', -27);
						});
						$('#' + type + 'List').animate({'top': 0}, 400);
					}
				}
			});
			updateHash();
			setTimeout('recalcScrolls($("#' + type + 'Col"))', 360);
			setTimeout('moveHiliter("' + type + '")', 360);
		}
	}
}
var mailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
function loginUser(unameInput, passwordInput) {
	if ($.trim(unameInput.val()) == '' || !mailRegex.test(unameInput.val())) {
		alert('Invalid Email address.');
		unameInput.focus();
		hideWorking('popSignIn');
		return;
	}
	if ($.trim(passwordInput.val()) == '') {
		alert('Blank password not valid.');
		passwordInput.focus();
		hideWorking('popSignIn');
		return;
	}
	var postVars = {'username': unameInput.val(),
		'password': passwordInput.val(),
		'xid': $.cookie('xid'),
		'usertype': 'C',
		'mode': 'login'
	};
	$.post(location.protocol + '//' + location.host + rootDir + 'cart/include/login.php?js_login=true', postVars, function(data) {
		eval(data);
	})
}
function registerUser(id) {
	if ($.trim($('#' + id + 'Email').val()) == '' || !mailRegex.test($('#' + id + 'Email').val())) {
		alert('Invalid Email address');
		$('#' + id + 'Email').focus();
		hideWorking('regPopBtn');
		return;
	}
	if ($.trim($('#' + id + 'Passwd1').val()) == '') {
		$('#' + id + 'Passwd1').focus();
		hideWorking('regPopBtn');
		return;
	}
	if ($('#' + id + 'Passwd1').val() != $('#' + id + 'Passwd2').val()) {
		alert('Passwords do not match.  Please re-enter');
		$('#' + id + 'Passwd1').val('').focus();
		$('#' + id + 'Passwd2').val('');
		hideWorking('regPopBtn');
		return;
	}
	var postVars = {'email': $('#' + id + 'Email').val(),
		'uname': $('#' + id + 'Email').val(),
		'passwd1': $('#' + id + 'Passwd1').val(),
		'passwd2': $('#' + id + 'Passwd2').val(),
		'usertype': 'C',
		'xid': $.cookie('xid'),
		'js_reg': 'true'
	}
	$.post(location.protocol + '//' + location.host + rootDir + 'cart/register.php?xid=' + $.cookie('xid'), postVars, function(data) {
		eval(data);
	});
}
function loginSuccess() {
	loggedIn = true;
	$('#regPopTop a.regPopClose').trigger('click');
	$(postRegObj).trigger('click');
	updateCartGlance();
}
function hidePopup(evt) {
	evt.preventDefault();
	evt.stopPropagation();
	if ($.browser.msie) {
		$('#shade').css('display', 'none');
	} else {
		$('#shade').fadeOut(500);
	}
	$('#regPop').fadeOut(500, function() {
		// reset the popup in case they come across it again.
		switchPopup('regPop');
	});
}
function recoverPasswd(evt) {
	evt.preventDefault();
	evt.stopPropagation();
	if ($('#recoverPasswdTop').size() == 0) {
		$('<div>').addClass('top').attr('id', 'recoverPasswdTop').html('<span>Forgot your password?</span><a href="#" class="regPopClose"></a>').insertAfter('#regPopTop');
		$('#recoverPasswdTop a.regPopClose').click(function(evt) {hidePopup(evt);hideWorking();});
		$('<div>').addClass('body').attr('id', 'recoverPasswdBody').html('<p>Please enter your e-mail address to recover your password.  Your account information will be sent shortly.<table><tr><td class="label">Email</td><td><input type="text" name="username" id="recoverEmail"/></td><td><a href="#" class="submitButton" id="recoverSubmit"></a></td></tr></table>')
			.insertAfter('#regPopBody');
		$('#recoverSubmit').click(submitRecoverPasswd);
	}
	switchPopup('recoverPasswd');
}
function submitRecoverPasswd(evt) {
	startWorking(this);
	evt.preventDefault();
	evt.stopPropagation();
	if ($.trim($('#recoverEmail').val()) == '' || !mailRegex.test($('#recoverEmail').val())) {
		alert('Invalid Email address');
		return;
	}
	var postVars = {'email': $('#recoverEmail').val(),
		'action': 'recover_password'
	};
	$.post(location.protocol + '//' + location.host + rootDir + 'cart/help.php?section=Password_Recovery&js_confirm=true', postVars, function(data) {
		eval(data);
		hideWorking('recoverSubmit');
	})
}
function switchPopup(switchTo) {
	$('#regPop div.top').each(function() {
		if (this.id == switchTo + 'Top') {
			$(this).show();
		} else {
			$(this).hide();
		}
	});
	$('#regPop div.body').each(function() {
		if (this.id == switchTo + 'Body') {
			$(this).show();
		} else {
			if (switchTo == 'popRecover' && this.id == 'regPopBody' ||
				switchTo == 'regPop' && this.id == 'popRecoverBody') {
				$('#regPopBody').show();
			} else {
				$(this).hide();
			}
		}
	});
}
function showMessage(message) {
	alert(message);
}
function startWorking(item) {
	var pos = $(item).position();
	var div = $('<div>').addClass('working').css({width: $(item).width(), height: $(item).height(),
		top: pos['top'], left: pos['left']}).attr('id', item.id + 'Working');
	var id = item.id;
	if (id == 'saveToFavs') {
		div.css({'background-image': 'url(../images/save_to_favs_working.gif)',
			'left': pos['left'] - 2, 'margin-left': $(item).css('margin-left')});
	} else if (id == 'addShoe') {
		div.css({'background-image': 'url(../images/add_shoe_working.gif)',
			'margin-left': $(item).css('margin-left'), 'margin-top': $(item).css('margin-top')});
	} else if (id == 'addStrap') {
		div.css({'background-image': 'url(../images/add_strap_working.gif)',
			'margin-left': $(item).css('margin-left'), 'margin-top': $(item).css('margin-top')});
	} else if (id == 'recoverSubmit') {
		div.css({'background-image': 'url(../images/submit_working.gif)',
			'top': pos['top'] - 1, 'height': $(item).height() + 3});
	} else if (id == 'popSignIn' || id == 'regPopBtn') {
		div.css({'background-image': 'url(../images/signin_working.gif)',
			'top': pos['top'] - 1, 'height': $(item).height() + 3});
	}
	div.insertAfter(item);
}
function hideWorking(id) {
	if (id == null) {
		$('div.working').remove();
	} else {
		// this has to be done this way because cloning actually doubles up some of the
		// elements with the same id.  Dunno a quick fix for that so this will remedy it.
		id = id + 'Working';
		$('div.working').each(function() {
			if (this.id == id) {
				$(this).remove();
			}
		});
	}
}
function showLogin() {
	var width = $('#regPop').width() / 2;
	var height = $('#regPop').height() /2;
	$('#regPop').css({marginLeft: -width, marginTop: $(window).scrollTop() - height});
	$('#shade').width($(document).width()).height($(document).height());
	if ($.browser.msie) {
		$('#shade').css('display', 'block');
	} else {
		$('#shade').fadeIn(500);
	}
	$('#regPop').fadeIn(500);
}
function popitup(evt) {
	newwindow=window.open($(this).attr('href'),'name','height=511,width=578');
	if (window.focus) {newwindow.focus()}
	evt.preventDefault();
	evt.stopPropagation();
}
function rollbackDropbox(dropbox) {
	if (dropbox.attr('_prevVal')) {
		dropbox.children('span.title').html(dropbox.attr('_prevVal'));
	}
}
function refreshHomePage() {
	window.location.href = baseUrl + 'home/index.html?t=' + new Date().getTime();
}

Are there any similar existing scripts for this one?