/*
	version 1.1 - 1/27/2009 - revised to work more like the product detail page.
	version 1.1 - 1/28/2009 - changed behavior of modal to not submit on close.
	
*/

$(document).ready(function () {
	
	// populate the selects on the search page
	var $manSel = $("select[name='manufacturer']"), $modSel = $('select[name=model]'), manOptions = '<option value="">Select Housing Brand</option>';
	$.each( data, function(manufacturer){ manOptions += '<option value="' + manufacturer + '">' + manufacturer + '</option>'; });
	$manSel.append(manOptions);
	$modSel.attr('disabled','disabled');

	// set the onchange handler for the manufacturer select
	$manSel.change(function(){
		var items = data[this.value], modOptions='<option value="">Select Camera Model</option>';
		if( this.selectedIndex ) { 
			$.each(items, function(model,sku){ modOptions += '<option value="' + sku + '">' + model + '</option>'; });
			$modSel.html(modOptions).removeAttr('disabled');
			}
		else
			$modSel.empty().attr('disabled','disabled');
	});

	// set the onchange handler for the model select
	$modSel.change(function(e) {
		e.preventDefault();
		var thisSel = $(this);
		// initialize and show the modal
		$("#basicModalContent").modal({	onClose: function (dialog) { dialog.data.fadeOut('slow', function () {
																	dialog.container.slideUp('slow', function () {
																		dialog.overlay.fadeOut('slow', function () {
																			$.modal.close(); // must call this!
																		});
																	});
																});
															}, //onClose
										onOpen: function (dialog) { 
																	dialog.overlay.fadeIn('slow', function () {
																		dialog.container.slideDown('slow', function () {
																			dialog.data.fadeIn('slow',function() {
																				$("#basicModalContent")
																					.empty()
																					.html('<div style="width:920px; height:660px; display:table-cell; vertical-align:middle;"><img border="0" src="/hostedstore/templates/backscatter_wideload/images_js/loading.gif" /></div>')
																					.load( "/_scripts/portfindermodal.lasso", { 'man':$manSel.val(), 'mod':thisSel.val() }, 
																						function() { 
																						// attach the onChange function to the checkboxes
																						$('input[value*="||"]').change(function () {
																							var sku = $(this).val().split('||')[2];
																							var cbSet = $('input:checkbox[value*="' + sku + '"]');
																							$('input:checkbox[value*="' + sku + '"]').not($(this)).attr("checked", false); //set all others to unchecked
																							if($('input:checkbox:checked[value*="' + sku + '"]').length) {
																								cbSet.parent().parent().children('p').remove(); // remove any <p>s
																								cbSet.not($(this)).parent().hide().parent().append('<p align="center" class="warning">Already Selected!</p>'); // add a <p>
																								}
																							else {
																								cbSet.parent().parent().children('p').remove(); // remove the <p>s since nothing is checked.
																								cbSet.parent().show(); // show all cbs
																								}
																						}); // change

																						// attach onchange and make the lenses scroll to position of the selector
																						$("#lens").change(function(){
																							$("#scroller").scrollTo(escID("#"+this.value), 1, {axis:'x'});
																						});

																						// attach onclick to the submit "Add to Cart" buttons
																						$(".portal-submit").click( function() {
																							// append the checkboxes to the form
																							var skus = "";
																							$("input:checkbox:checked").each( function() {
																									var data=this.value.split("||");
																									skus += data[2] + "||";
																									});
																							$('<input type="hidden" name="PortFinderSelectedSKUs" value="' + skus + '">').appendTo("form[name=portalform]"); // will append the table to the #portal div
																							$("form[name=portalform]").submit();
																						});

																						// scroll to the first column. fixes the 2 px of hidden scroller
																						$("#scroller").scrollTo($("#row1"), 1, {axis:'x'});

																						// rebind the close class due to ajax loaded data
																						$(".simplemodal-close").click(function(){ $.modal.close(); });
																					}); // load the modal contents
																			});//fade in slow
																		});//slide down slow
																	});//fade in slow
															} //onopen
		}); //modal	
	});//modsel
	
	// escape any funky characters in the ID attribute which I believe is populated by SKUs.
	function escID(myid)
	  { return myid.replace(/:/g,"\\:").replace(/\./g,"\\."); }
	
	// give an onCompare function to jQuery
	$.fn.equals = function(compareTo) { 
		if (!compareTo || !compareTo.length || this.length!=compareTo.length) { 
			return false; 
			} 
		for (var i=0; i<this.length; i++) { 
			if (this[i]!==compareTo[i]) { 
				return false; 
				} 
			} 
		return true; 
	} 

});	// ready