/*
// jQuery multiSelect
//
// Version 1.0.2 beta
//
// Cory S.N. LaViska
// A Beautiful Site (http://abeautifulsite.net/)
// 10 May 2009
//
// Visit http://abeautifulsite.net/notebook.php?article=62 for more information
//
// Usage: $('#control_id').multiSelect( options, callback )
//
// Options:  selectAll          - whether or not to display the Select All option; true/false, default = true
//           selectAllText      - text to display for selecting/unselecting all options simultaneously
//           noneSelected       - text to display when there are no selected items in the list
//           oneOrMoreSelected  - text to display when there are one or more selected items in the list
//                                (note: you can use % as a placeholder for the number of items selected).
//                                Use * to show a comma separated list of all selected; default = '% selected'
//           selectAllChecked   - whether or not the select all is checked, default = false
//           selectAllDisplayText - the text to display in the drop down when all are selected
//
// Dependencies:  jQuery 1.2.6 or higher (http://jquery.com/)
//
// Change Log:
//
//		1.0.1	- Updated to work with jQuery 1.2.6+ (no longer requires the dimensions plugin)
//				- Changed $(this).offset() to $(this).position(), per James' and Jono's suggestions
//
//		1.0.2	- Fixed issue where dropdown doesn't scroll up/down with keyboard shortcuts
//				- Changed '$' in setTimeout to use 'jQuery' to support jQuery.noConflict
//				- Renamed from jqueryMultiSelect.* to jquery.multiSelect.* per the standard recommended at
//				  http://docs.jquery.com/Plugins/Authoring (does not affect API methods)
//      ******  - This has been greatly modified to fit the requirements of the Shopbop quick find component 
//
// Licensing & Terms of Use
// 
// This plugin is dual-licensed under the GNU General Public License and the MIT License and
// is copyright 2008 A Beautiful Site, LLC. 
//	
*/
if(jQuery) (function($){
	$.extend($.fn, {
		multiSelect: function(o, callback) {
			// Default options
			if( !o ) var o = {};
			if( o.selectAll == undefined ) o.selectAll = true;
			if( o.selectAllText == undefined ) o.selectAllText = 'Select All';
			if( o.noneSelected == undefined ) o.noneSelected = 'Select options';
			if( o.oneOrMoreSelected == undefined ) o.oneOrMoreSelected = '% selected';
			if( o.selectAllChecked == undefined ) o.selectAllChecked = false;
			if( o.selectAllDisplayText == undefined ) o.selectAllDisplayText = '% selected';
			if( o.myDesigners == undefined ) o.myDesigners = false;
			if( o.myDesignersText == undefined ) o.myDesignersText = '';
			
			// Initialize each multiSelect
			$(this).each( function() {
				var select = $(this);
				var html = '<input type="text" readonly="readonly" class="multiSelect" value="" style="cursor: default;" />';
				
				html += '<div class="multiSelectOptions" style="position: absolute; z-index: 99999; display: none;"><div class="multiSelectOptionsInner" id="' + select.attr("id") + 'inner">';
				
				if( o.myDesigners ) {
					$(select).find('OPTION').each(function(){
						if ($(this).val() == o.myDesignersText) {
							// Only add the My Designers to the multi select if the user has My Designers. Indicated by the prescence of the
							// My Designers option value
							html += '<label><input type="checkbox" class="multiSelectCheckbox myDesigners" name="' + "selected" + $(select).attr('name') + '" value="' + o.myDesignersText + '"';
							$(select).find('OPTION').each( function() {
								if( $(this).val() != '' && $(this).val() == o.myDesignersText ) {
									if( $(this).attr('selected') ) {
										html += ' checked="checked"';
									}
								}
							});
							html += ' />' + o.myDesignersText + '</label>';
						}
					});
				}
				if( o.selectAll ) {
					if( o.selectAllChecked) {
						html += '<label class="selectAll"><input type="checkbox" class="selectAll" checked="checked"/>' + o.selectAllText + '</label>';
					} else {
						html += '<label class="selectAll"><input type="checkbox" class="selectAll" />' + o.selectAllText + '</label>';
					}
				}
				$(select).find('OPTION').each( function() {
					//The My Designers was done prior to the All Designers
					if( $(this).val() != '' && $(this).val() != o.myDesignersText ) {
						html += '<label><input type="checkbox" class="multiSelectCheckbox" name="' + "selected" + $(select).attr('name') + '" value="' + $(this).val() + '"';
						if( $(this).attr('selected') ) {
							html += ' checked="checked"';
						}
						html += ' />' + $(this).html() + '</label>';
					}
				});
				html += '</div>';
				html += '<div class="multiSelectFooter">';
				html += '<img class="multiSelectFooter1" id="multiSelectFooter1' + select.attr("id") + '" src="http://g-ecx.images-amazon.com/images/G/01/Shopbop/pcs/media/images/quickfind/button_cancel.gif"/>';
				html += '<img class="multiSelectFooter2" id="multiSelectFooter2' + select.attr("id") + '" src="http://g-ecx.images-amazon.com/images/G/01/Shopbop/pcs/media/images/quickfind/button_apply.gif"/>';
				html += '<div class="clear_class"/></div>';
				html += '</div>';
				$(select).after(html);
				
				//If you want to see the html generated, it won't show on the page source
				//alert(html);
				
				// Events
				$(select).next('.multiSelect').mouseover( function() {
					$(this).addClass('hover');
				}).mouseout( function() {
					$(this).removeClass('hover');
				}).click( function() {
					// Show/hide on click
					if( $(this).hasClass('active') ) {
						$(this).multiSelectOptionsHide();
					} else {
						$(this).multiSelectOptionsShow();
					}
					return false;
				}).focus( function() {
					// So it can be styled with CSS
					$(this).addClass('focus');
				}).blur( function() {
					// So it can be styled with CSS
					$(this).removeClass('focus');
				});
				
				// Determine if Select All should be checked initially
				if( o.selectAll ) {
					var sa = true;
					$(select).next('.multiSelect').next('.multiSelectOptions').find('INPUT:checkbox').not('.selectAll').each( function() {
						if( !$(this).attr('checked') ) sa = false;
					});
					if( sa ) $(select).next('.multiSelect').next('.multiSelectOptions').find('INPUT.selectAll').attr('checked', true).parent().addClass('checked');
				}
				
				// Handle Select All
				$(select).next('.multiSelect').next('.multiSelectOptions').find('INPUT.selectAll').click( function() {
					if( $(this).attr('checked') == true ) {
						$(this).parent().parent().find('INPUT:checkbox').attr('checked', true).parent().addClass('checked');
					} else {
						$(this).parent().parent().find('INPUT:checkbox').attr('checked', false).parent().removeClass('checked');
					}
				});
				
				// Handle checkboxes
				$(select).next('.multiSelect').next('.multiSelectOptions').find('INPUT:checkbox').click( function() {
					if ($(this).val() == o.myDesignersText) {
						//if ($(this).attr('checked')) {
							// They clicked the My designers, uncheck everything else
							$(this).parent().parent().find('INPUT:checkbox').each( function() {
								if ($(this).val() != o.myDesignersText) {
									$(this).attr('checked', false);
								}
							});
						//}
					} else if ($(this).is(".selectAll") == false){
//						// They didn't click My Designers or All Designers, make sure My Designers is unchecked
						$(this).parent().parent().find(".myDesigners").attr('checked', false);
					}

					//Call multiSelectUpdate on the options object 
					$(this).parent().parent().parent().multiSelectUpdateSelected(o);
					$(this).parent().parent().find('LABEL').removeClass('checked').find('INPUT:checked').parent().addClass('checked');
					$(this).parent().parent().prev('.multiSelect').focus();
					if( !$(this).attr('checked') ) $(this).parent().parent().find('INPUT:checkbox.selectAll').attr('checked', false).parent().removeClass('checked');

					if( callback ) callback($(this));
				});
				
				// Initial display
				$(select).next('.multiSelect').next('.multiSelectOptions').each( function() {
					$(this).multiSelectUpdateSelected(o);
					$(this).find('INPUT:checked').parent().addClass('checked');
				});
				
				// Handle hovers
				$(select).next('.multiSelect').next('.multiSelectOptions').find('LABEL').mouseover( function() {
					$(this).parent().find('LABEL').removeClass('hover');
					$(this).addClass('hover');
				}).mouseout( function() {
					$(this).parent().find('LABEL').removeClass('hover');
				});
				
				// Keyboard
				$(select).next('.multiSelect').keydown( function(e) {
					// Is dropdown visible?
					if( $(this).next('.multiSelectOptions').is(':visible') ) {
						// Dropdown is visible
						// Tab
						if( e.keyCode == 9 ) {
							$(this).addClass('focus').trigger('click'); // esc, left, right - hide
							$(this).focus().next(':input').focus();
							return true;
						}
						
						// ESC, Left, Right
						if( e.keyCode == 27 || e.keyCode == 37 || e.keyCode == 39 ) {
							// Hide dropdown
							$(this).addClass('focus').trigger('click');
						}
						// Down
						if( e.keyCode == 40 ) {
							if( !$(this).next('.multiSelectOptions').find('LABEL').hasClass('hover') ) {
								// Default to first item
								$(this).next('.multiSelectOptions').find('LABEL:first').addClass('hover');
							} else {
								// Move down, cycle to top if on bottom
								$(this).next('.multiSelectOptions').find('LABEL.hover').removeClass('hover').next('LABEL').addClass('hover');
								if( !$(this).next('.multiSelectOptions').find('LABEL').hasClass('hover') ) {
									$(this).next('.multiSelectOptions').find('LABEL:first').addClass('hover');
								}
							}
							
							// Adjust the viewport if necessary
							$(this).multiSelectAdjustViewport($(this) );
							
							return false;
						}
						// Up
						if( e.keyCode == 38 ) {
							if( !$(this).next('.multiSelectOptions').find('LABEL').hasClass('hover') ) {
								// Default to first item
								$(this).next('.multiSelectOptions').find('LABEL:first').addClass('hover');
							} else {
								// Move up, cycle to bottom if on top
								$(this).next('.multiSelectOptions').find('LABEL.hover').removeClass('hover').prev('LABEL').addClass('hover');
								if( !$(this).next('.multiSelectOptions').find('LABEL').hasClass('hover') ) {
									$(this).next('.multiSelectOptions').find('LABEL:last').addClass('hover');
								}
							}
							
							// Adjust the viewport if necessary
							$(this).multiSelectAdjustViewport($(this) );
							
							return false;
						}
						// Enter, Space
						if( e.keyCode == 13 || e.keyCode == 32 ) {
							// Select All
							if( $(this).next('.multiSelectOptions').find('LABEL.hover INPUT:checkbox').hasClass('selectAll') ) {
								if( $(this).next('.multiSelectOptions').find('LABEL.hover INPUT:checkbox').attr('checked') ) {
									// Uncheck all
									$(this).next('.multiSelectOptions').find('INPUT:checkbox').attr('checked', false).parent().removeClass('checked');
								} else {
									// Check all
									$(this).next('.multiSelectOptions').find('INPUT:checkbox').attr('checked', true).parent().addClass('checked');
								}
								$(this).next('.multiSelectOptions').multiSelectUpdateSelected(o);
								if( callback ) callback($(this));
								return false;
							}
							// Other checkboxes
							if( $(this).next('.multiSelectOptions').find('LABEL.hover INPUT:checkbox').attr('checked') ) {
								// Uncheck
								$(this).next('.multiSelectOptions').find('LABEL.hover INPUT:checkbox').attr('checked', false);
								$(this).next('.multiSelectOptions').multiSelectUpdateSelected(o);
								$(this).next('.multiSelectOptions').find('LABEL').removeClass('checked').find('INPUT:checked').parent().addClass('checked');
								// Select all status can't be checked at this point
								$(this).next('.multiSelectOptions').find('INPUT:checkbox.selectAll').attr('checked', false).parent().removeClass('checked');
								if( callback ) callback($(this));
							} else {
								// Check
								$(this).next('.multiSelectOptions').find('LABEL.hover INPUT:checkbox').attr('checked', true);
								$(this).next('.multiSelectOptions').multiSelectUpdateSelected(o);
								$(this).next('.multiSelectOptions').find('LABEL').removeClass('checked').find('INPUT:checked').parent().addClass('checked');
								if( callback ) callback($(this));
							}
						}
						return false;
					} else {
						// Dropdown is not visible
						if( e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 13 || e.keyCode == 32 ) { // down, enter, space - show
							// Show dropdown
							$(this).removeClass('focus').trigger('click');
							$(this).next('.multiSelectOptions').find('LABEL:first').addClass('hover');
							return false;
						}
						//  Tab key
						if( e.keyCode == 9 ) {
							// Shift focus to next INPUT element on page
							$(this).focus().next(':input').focus();
							return true;
						}
					}
					// Prevent enter key from submitting form
					if( e.keyCode == 13 ) return false;
				});
				
				// If there is a scroll bar we need to adust the size of the footer
//				if (select.attr('clientHeight') < select.attr('scrollHeight')) {
//					console.log(select);
//					console.log(select.parent());
//					console.log(select.next());
//					console.log(select.next().next());
//					alert("there is a scroll bar");
//				} else {
//					
//				}
				
				// Eliminate the original form element
				//$(select).hide();
			});
			
		},
		
		// Hide the dropdown
		multiSelectOptionsHide: function() {
			$(this).removeClass('active').next('.multiSelectOptions').hide();
		},
		
		// Show the dropdown
		multiSelectOptionsShow: function() {
			// Hide any open option boxes
			$('.multiSelect').multiSelectOptionsHide();
			$(this).next('.multiSelectOptions').find('LABEL').removeClass('hover');
			$(this).addClass('active').next('.multiSelectOptions').show();
			
			// Position it
			var offset = $(this).position();
			$(this).next('.multiSelectOptions').css({ top:  offset.top + $(this).outerHeight() + 'px' });
			$(this).next('.multiSelectOptions').css({ left: offset.left + 'px' });
			
			// Disappear on hover out
			multiSelectCurrent = $(this);
			//Removed this so the drop down stays visible.
//			var timer = '';
//			$(this).next('.multiSelectOptions').hover( function() {
//				clearTimeout(timer);
//			}, function() {
//				timer = setTimeout('jQuery(multiSelectCurrent).multiSelectOptionsHide(); $(multiSelectCurrent).unbind("hover");', 100000);
//			});
			
		},
		
		// Update the textbox with the total number of selected items
		multiSelectUpdateSelected: function(o) {
			var i = 0, s = '';
			$(this).find('INPUT:checkbox:checked').not('.selectAll').each( function() {
				//This is the total number selected, excluding the "All Designers"
				i++;
			})
			//If there are none selected and the selectAll is not selected
			// This sets the All Designers on initial load
			if( i == 0  ) {
				$(this).find('INPUT:checkbox.selectAll').attr('checked', true);
				$(this).parent().prev('INPUT.multiSelect').val( o.selectAllDisplayText);
				if( $(this).parent().text() != o.selectAllText ) {
					$(this).prev('INPUT.multiSelect').val( o.selectAllDisplayText.replace('%', i)  );
				} else {
					$(this).prev('INPUT.multiSelect').val( o.noneSelected );
				}
			} else {
				if( o.oneOrMoreSelected == '*' ) {
					// This isn't used
					var display = '';
					$(this).find('INPUT:checkbox:checked').each( function() {
						if( $(this).parent().text() != o.selectAllText ) display = display + $(this).parent().text() + ', ';
					});
					display = display.substr(0, display.length - 2);
					$(this).prev('INPUT.multiSelect').val( display );
				} else {
					var countAll = 0;
					$(this).find('INPUT:checkbox').each( function() {
						// Count the total number of brands, excluding the select all
						if( $(this).parent().text() != o.selectAllText ) {
							countAll++;
						}
					});
					//If the total number of brands equal the number selected
					//Uncheck all the then check the select all
					if ( countAll - i == 0) {
						$(this).find('INPUT:checkbox').attr('checked', false)
						$(this).find('INPUT:checkbox.selectAll').attr('checked', true);
						$(this).prev('INPUT.multiSelect').val( o.selectAllDisplayText);
					} else {
						$(this).find('INPUT:checkbox.selectAll').attr('checked', false); //This unchecks the All Designers when selecting a single brand
						if ($(this).find(".myDesigners").attr('checked')) {
							$(this).prev('INPUT.multiSelect').val( 'My Designers selected' );
						} else {
							$(this).prev('INPUT.multiSelect').val( o.oneOrMoreSelected.replace('%', i) );
						}

					}
				}
			}
		},
		
		// Ensures that the selected item is always in the visible portion of the dropdown (for keyboard controls)
		multiSelectAdjustViewport: function(el) {
			// Calculate positions of elements
			var i = 0;
			var selectionTop = 0, selectionHeight = 0;
			$(el).next('.multiSelectOptions').find('LABEL').each( function() {
				if( $(this).hasClass('hover') ) { selectionTop = i; selectionHeight = $(this).outerHeight(); return; }
				i += $(this).outerHeight();
			});
			var divScroll = $(el).next('.multiSelectOptions').scrollTop();
			var divHeight = $(el).next('.multiSelectOptions').height();
			// Adjust the dropdown scroll position
			$(el).next('.multiSelectOptions').scrollTop(selectionTop - ((divHeight / 2) - (selectionHeight / 2)));
		},
		
		//Reset 
		multiSelectReset: function (text) {
			var select = $(this);
			var options = select.find("INPUT:checkbox");
			
			//Uncheck all the check boxes
			options.each( function(idx, value) {
				$(value).attr('checked', false);
			});
			
			//Reset the select text
			select.parent().prev().val(text);
			
			//Check the select all
			jQuery(".multiSelectOptions").find('INPUT:checkbox.selectAll').attr('checked', true);
			
			//Remove the class on the selected label
			jQuery(".productBrowsePageAction").find('LABEL').removeClass('checked');
		},
		
		multiSelectCancel: function(o) {
			var options = $(this);
			var selected = 0;
			
			//Remove all the selected checkboxes first
			$(this).find('INPUT:checkbox').not('.selectAll').each( function() {
				$(this).attr('checked', false);
			});
			
			//Now loop through the original select options and find the ones that were selected
			$(o).find('OPTION').each( function() {
				if( $(this).val() != '' ) {
					//Was this options selected
					if( $(this).attr('selected') ) {
						selected++
						var selectedOption = $(this).val();
						
						//Loop through the input check boxes
						$(options).find('INPUT:checkbox').each( function() {
							//If the value of the select option is the same 
							//as the value of the input checkbox
							if ($(this).val() == selectedOption ) {
								$(this).attr('checked', true);
							}
						});
					}
				}
			});
			//Assume that if nothing was counted, then revert back to select all
			if (selected == 0) {
				$(this).find('INPUT:checkbox.selectAll').attr('checked', true);
			}
		},
		
		//***************************************************
		//Sort by
		//***************************************************
		multiSelectSortBy: function(callback) {
			// Default options

			// Initialize each multiSelect
			$(this).each( function() {
				var selectedText = "";
				var selectedValue = "";
				var select = $(this);
				var html = '<input type="text" readonly="readonly" class="multiSelect" value="" style="cursor: default;" />';
				
				html += '<div class="multiSelectOptions" style="position: absolute; z-index: 99999; display: none;"><div class="multiSelectOptionsInner" id="' + select.attr("id") + 'inner">';
				
				$(select).find('OPTION').each( function() {
					if( $(this).val() != '' ) {
						html += '<input type="text" class="sortBySelect" readonly="readonly" name="' + $(this).val() + '" value="' + $(this).html() + '"';
						html += ' />';
						if ($(this).attr('selected')) {
							selectedText = $(this).html();
							selectedValue = $(this).val();
						}
					}
				});
				$(this).prev('INPUT.multiSelect').val( selectedText);
				html += '</div>';
				$(select).after(html);
				
				
				
				
				//If you want to see the html generated, it won't show on the page source
				//alert(html);
				
				// Events
				$(select).next('.multiSelect').mouseover( function() {
					$(this).addClass('hover');
				}).mouseout( function() {
					$(this).removeClass('hover');
				});
				$(select).next('.multiSelect').click( function() {
					// Show/hide on click
					if( $(this).hasClass('active') ) {
						$(this).multiSelectOptionsHide();
					} else {
						$(this).multiSelectOptionsShow();
					}
					return false;
				}).focus( function() {
					// So it can be styled with CSS
					$(this).addClass('focus');
				}).blur( function() {
					// So it can be styled with CSS
					$(this).removeClass('focus');
				});
				
				// Initial display
				$(select).next('.multiSelect').next('.multiSelectOptions').each( function() {
					$(this).prev('INPUT.multiSelect').val(selectedText);
				});
				
				// Handle hovers
				$(select).next('.multiSelect').next('.multiSelectOptions').find('LABEL').mouseover( function() {
					$(this).parent().find('LABEL').removeClass('hover');
					$(this).addClass('hover');
				}).mouseout( function() {
					$(this).parent().find('LABEL').removeClass('hover');
				});
				
				
			});
			
		}
		
	});
	
})(jQuery);