*/
function _openSelect(element) {
$('ul.options').not(element).slideUp('fast');
$(element).find('li.option').removeClass('hover');
var readOnly = ($(element).parent().hasClass('read-only')) || ($(element).parent().attr("readonly")== "true");
if(false == readOnly) {
$(element).parent().find('ul.options').slideToggle('fast', function() {
var maxWidth = 0;
var totalHeight = 0;
var liods = $(element).parent().find('li.option div');
$(liods).each(function(index, liod) {
maxWidth = Math.max($(liod).outerWidth(), maxWidth);
totalHeight += $(liod).parent().outerHeight();
});
// determines if we need to leave enough room for the scroll bar
var ulPadding = 7;
if(totalHeight > $(element).parent().find('ul').height()) {
ulPadding += getScrollerWidth(); // if there will be a scroll bar, give some space
}
var selElWidth = $(element).width();
if(maxWidth + ulPadding > selElWidth){
$(liods).parent().width(maxWidth);
$(element).parent().find('ul.options').width(maxWidth + ulPadding);
}else{
$(liods).parent().width(selElWidth - ulPadding);
$(element).parent().find('ul.options').width(selElWidth);
}
_setOptionWidths($(element).parent());
_revealHover($(element).parent());
});
var dol = $(element).parent().find('div.options-list');
$(dol).width($(dol).children('ul').width());
}
}
/*
* determine the maximum width of an option in the select
*/
function _setOptionWidths(select) {
var opts = $(select).find('li.option');
$(opts).css('white-space', 'nowrap');
$(opts).css('padding-right', '25px');
$(select).find('ul.options').css('padding-right', '25px');
}
/*
* Actions that need to be executed after the selects are prepared
*/
var _readyQueue = new Array();
/*
* Prepares selects of the form described in the above function at the time the page loads.
*/
$(document).ready(function () {
$('div.select').each(function(index, element) {
prepareSelect($(element));
});
while(_readyQueue.length > 0) {
var f = _readyQueue.shift();
f();
}
//close all when clicked outside
$('body').click(function() {
$('ul.options').slideUp('fast');
});
});
/*
* Enqueues an action so that it is run when the document is ready, but after the selects have been built
* out. This is necessary for click() events on the dropdown that depend on knowing what the value the user
* has selected.
*/
function enqueueReadyAction(f) {
_readyQueue.push(f);
}
/*
* Change the value of a select.
* element is the hidden form element in the div.select
*/
function setSelectValue(element, newValue) {
var seFound = null;
$(element).parent().find('li.option').each(function (index, li) {
var v = $(li).attr('v');
if(v == newValue) {
seFound = li;
$(li).addClass('selected');
$(element).children('input').val($(li).attr('v'));
} else {
$(li).removeClass('selected');
}
});
if(seFound != undefined) {
$(element).val($(seFound).attr('v'));
$(element).parent().find('div.selected').html('
'+$(seFound).html()+'
');
_fireChangeHandlers(seFound);
}
};
function addSelectOnChange(element, func) {
var a = $(element).data('_changeHandlers');
if(undefined == a) {
a = new Array();
$(element).data('_changeHandlers', a);
}
a.push(func);
}
/*
* Sets a select to read-only
* element is the hidden form element in the div.select
* readonly is true or false. default is true
*/
function setReadOnly(element, readOnly) {
var ro = (readOnly == 'false' || readOnly == false) ? false : true;
if(ro) {
$(element).parent().addClass('read-only');
} else {
$(element).parent().removeClass('read-only');
}
$(element).parent().attr("readonly",ro);
}
var _scrollerWidth = null;
function getScrollerWidth() {
if(null == _scrollerWidth) {
_scrollerWidth = __getScrollerWidth();
}
return _scrollerWidth;
}
// from http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
function __getScrollerWidth() {
var div = $('
');
// Append our div, do our calculation and then remove it
$('body').append(div);
var w1 = $('div', div).innerWidth();
div.css('overflow-y', 'scroll');
var w2 = $('div', div).innerWidth();
$(div).remove();
return (w1 - w2);
}
//
// Tab flyouts
//
function dce(className) {
var result = document.createElement('div');
result.className = className
return result;
}
/*
* create the tab flyouts
*/
$(document).ready(function () {
$('li.child-category ul.level3').each(function (index, element) {
var flyout = dce('flyout');
var flyoutOverstate = dce('flyout-overstate');
var flyoutAnchor = dce('flyout-anchor');
var flyoutAnchorFill = dce('flyout-anchor-fill');
var flyoutContainer = dce('flyout-container');
var flyoutTop = dce('flyout-top');
var flyoutBottom = dce('flyout-btm');
var flyoutMain = dce('flyout-main');
var flyoutClear = dce('clear');
var flyoutBrowseAll = dce('flyout-browse-all');
var l2link = $(element).prev().clone();
var l2BrowseLink = l2link.clone();
$(l2BrowseLink).attr('style', '');
$(l2BrowseLink).html('Browse All');
//flyout.style.display="none";
$(element).parent().attr('hasflyout', 'true');
$(element).after(flyout);
$(flyout).append(flyoutOverstate);
$(flyoutOverstate).append(l2link);
$(flyout).append(flyoutContainer);
$(flyoutContainer).append(flyoutAnchor);
$(flyoutAnchor).append(flyoutAnchorFill);
$(flyoutContainer).append(flyoutTop);
$(flyoutTop).append(flyoutBottom);
$(flyoutBottom).append(flyoutMain);
$(flyoutMain).append(element);
// flyoutClear and flyoutBrowseAll are appended at the end
var numL3Elems = $(element).children('li').size()
var numCols = (numL3Elems < 10) ? 1 : ((numL3Elems < 19) ? 2 : 3);
var numRows = Math.ceil(numL3Elems/numCols);
// estimate height of flyout vs position of parent
var flyoutHeight = 7 + 22*numRows;
var parentY = 10 + 35*index;
var position = (parentY > flyoutHeight) ? 'btm' : 'top';
$(flyout).attr('pos', position);
$(flyout).attr('cols', numCols);
var colsLeft = numCols;
var lastInCol = -1;
var colElem = null;
var colNum = 0;
$(element).children('li').each(function (i, li) {
if(lastInCol <= i) {
colNum++;
colElem = document.createElement('ul');
$(element).parent().append(colElem);
lastInCol = Math.ceil(colNum * numL3Elems / numCols);
}
$(colElem).append(li);
});
$(flyoutMain).append(flyoutClear);
$(flyoutMain).append(flyoutBrowseAll);
$(flyoutBrowseAll).append(l2BrowseLink);
// activate the tab flyout
$(flyout).prev().bind("mouseenter", function() {
$('.flyout').css('display', 'none');
$('.flyout').parent().removeClass('covered');
$(flyout).parent().addClass('covered')
flyout.style.display = 'block';
var flyoutMain = $(flyout).find('.flyout-main');
// pre-widen the flyout to make the next calculation more accurate in IE.
$(flyoutMain).width(300);
// set the width of the flyoutMain so the columns can float
var totalWidth = 1;
$(flyoutMain).children('ul').each(function(index, ul) {
var maxLiWidth = 0;
$(ul).find('li span').each(function(spanindex, lispan) {
maxLiWidth = Math.max(maxLiWidth, Math.min($(lispan).width(), 210)); // 210 is the max width of a column minus the padding on the span's enclosing
});
var w = Math.max(160, maxLiWidth + 20) // 160 for the min-width of the ul, 20 for the padding on the span's enclosing
$(ul).width(w); // 20 for the padding on the span's enclosing
totalWidth += w + 19; // 20 for the padding on the span's enclosing , 19 for the margin width
});
$(flyoutMain).width(Math.max(160, totalWidth));
});
$(flyout).bind("mouseleave", function() {
flyout.style.display = 'none';
$(flyout).parent().removeClass('covered')
});
// remove the original one-column from the layout
$(element).remove();
});
$('li.child-category ul.level3b').each(function (index, element) {
var flyout = dce('flyout');
var flyoutOverstate = dce('flyout-overstate');
var flyoutAnchor = dce('flyout-anchor');
var flyoutAnchorFill = dce('flyout-anchor-fill');
var flyoutContainer = dce('flyout-container');
var flyoutTop = dce('flyout-top');
var flyoutBottom = dce('flyout-btm');
var flyoutMain = dce('flyout-main');
var flyoutClear = dce('clear');
var flyoutBrowseAll = dce('flyout-browse-all');
var l2link = $(element).prev().clone();
var l2BrowseLink = l2link.clone();
$(l2BrowseLink).attr('style', '');
$(l2BrowseLink).html('Browse All');
//flyout.style.display="none";
$(element).parent().attr('hasflyout', 'true');
$(element).after(flyout);
$(flyout).append(flyoutOverstate);
$(flyoutOverstate).append(l2link);
$(flyout).append(flyoutContainer);
$(flyoutContainer).append(flyoutAnchor);
$(flyoutAnchor).append(flyoutAnchorFill);
$(flyoutContainer).append(flyoutTop);
$(flyoutTop).append(flyoutBottom);
$(flyoutBottom).append(flyoutMain);
$(flyoutMain).append(element);
// flyoutClear and flyoutBrowseAll are appended at the end
var numL3Elems = $(element).children('li').size()
var numCols = (numL3Elems < 10) ? 1 : ((numL3Elems < 19) ? 2 : 3);
var numRows = Math.ceil(numL3Elems/numCols);
// estimate height of flyout vs position of parent
var flyoutHeight = 7 + 22*numRows;
var parentY = 10 + 35*index;
var position = (parentY > flyoutHeight) ? 'btm' : 'top';
$(flyout).attr('pos', position);
$(flyout).attr('cols', numCols);
var colsLeft = numCols;
var lastInCol = -1;
var colElem = null;
var colNum = 0;
$(element).children('li').each(function (i, li) {
if(lastInCol <= i) {
colNum++;
colElem = document.createElement('ul');
$(element).parent().append(colElem);
lastInCol = Math.ceil(colNum * numL3Elems / numCols);
}
$(colElem).append(li);
});
$(flyoutMain).append(flyoutClear);
$(flyoutMain).append(flyoutBrowseAll);
//$(flyoutBrowseAll).append(l2BrowseLink);
// activate the tab flyout
$(flyout).prev().bind("mouseenter", function() {
$('.flyout').css('display', 'none');
$('.flyout').parent().removeClass('covered');
$(flyout).parent().addClass('covered')
flyout.style.display = 'block';
var flyoutMain = $(flyout).find('.flyout-main');
// pre-widen the flyout to make the next calculation more accurate in IE.
$(flyoutMain).width(300);
// set the width of the flyoutMain so the columns can float
var totalWidth = 1;
$(flyoutMain).children('ul').each(function(index, ul) {
var maxLiWidth = 0;
$(ul).find('li span').each(function(spanindex, lispan) {
maxLiWidth = Math.max(maxLiWidth, Math.min($(lispan).width(), 210)); // 210 is the max width of a column minus the padding on the span's enclosing
});
var w = Math.max(160, maxLiWidth + 20) // 160 for the min-width of the ul, 20 for the padding on the span's enclosing
$(ul).width(w); // 20 for the padding on the span's enclosing
totalWidth += w + 19; // 20 for the padding on the span's enclosing , 19 for the margin width
});
$(flyoutMain).width(Math.max(160, totalWidth));
});
$(flyout).bind("mouseleave", function() {
flyout.style.display = 'none';
$(flyout).parent().removeClass('covered')
});
// remove the original one-column from the layout
$(element).remove();
});
});