(function ($) {
	$(function () {
		var $primaryContent = $('#primaryContent');
		// handle tabs
		var $tabbedContent = $('div.tabbed-content', $primaryContent);
		// only run if there's actually tabbed content to play with
		if ($tabbedContent.length) {
			var $tabbedContentTab		= $('> ul.tabs li', $tabbedContent);
			var $tabbedContentTabLink	= $('> a', $tabbedContentTab);
			var $tabbedContentTabContent= $('> div.tab', $tabbedContent);
			// do our initial hiding and attach event handlers
			var tabSwitchInit = function () {
				$tabbedContentTabLink.bind('click', switchTabs);
				$tabbedContentTabContent.not('.current').hide();
			};
			// switch which tab is visible
			var switchTabs =  function (e) {
				var $trigger = $(e.target);
				var $target = $('' + $trigger.attr('href'));
				if (!$target.is(':visible')) {
					$tabbedContentTabLink.filter('.current').removeClass('current');
					$trigger.addClass('current');
					
					$tabbedContentTabContent.not($target).removeClass('current').hide();
					$target.show();
				}
				e.preventDefault();
			};
			// set it off
			tabSwitchInit();
		}

		// handle finish switching
		var $orderForm		= $('div.ordering-info', $primaryContent);
		var $finishSwitcher	= $('select#finishSwitcher', $orderForm);
		var $finishSubmit	= $('input#Submit', $orderForm);
		if ($finishSwitcher.length) {
			var finishWrapper	= '<div id="finishSwitcherWrapper" class="clearfix"></div>';
			var $finishList		= $('<ul id="finishList" class="clearfix"></ul>');
			var $arrow			= $('<span id="finishListArrow"></span>');
			var $listPriceHolder= $('.price .list-price', $orderForm);
			var $salePriceHolder= $('.price .sale-price', $orderForm);
			// set up our list, hide elements, and attach appropriate handlers
			var switchFinishInit	= function () {
				// keep track of the original price
				// Create list from options
				var selectedFinish	= null;
				$('option', $finishSwitcher).each(function (i) {
					var $me		= $(this);
					var $opts	= ($me.attr('title') != '') ? eval("(" + $me.attr('title') + ")") : false;
					// remove the title atribute, give each option a unique ID, and create our new list
					$me.attr({
						 'id'	: 'finishOption' + i
						,'title': ''
					});
					// create a list item for each option, except the default
					var $newFinish = $('<li></li>');
					if ($opts) {
						$opts.target = '#finishOption' + i;
						var $productLink = $('<a href="' + $opts.imagePath + '" id="aaaa_' + i + '">' + $me.text() + '</a>')
											.data('productOptions', $opts);
						$newFinish.append($productLink);
						if ($me.attr('selected')) {
							selectedFinish = '#aaaa_' + i;
						}
					}
					else {
						$newFinish.addClass('trigger');
					}
					$finishList.append($newFinish);
				});
				// wrap the select element in the wrapper and hide it
				$finishSwitcher
					.wrap(finishWrapper)
					.hide();
				// append the new list to the wrapper, as well as the arrow
				$('#finishSwitcherWrapper').append($finishList, $arrow);
				// attach handler for each link in the new list
				$('> li > a', $finishList).bind('click', switchFinish);
				// attach handler for arrow (toggle $finishList overflow property)
				$arrow.bind('click', toggleList);
				$('li.trigger', $finishList).bind('click', toggleList);
				if (selectedFinish) {
					// move position of list - first trick the toggle, then do the select
					toggleList(0);
					doSelectList($(selectedFinish));
				}
			};
			// swap out the image and update the select
			var switchFinish = function (e) {
				var $finishImage	= $('img#mainProductFinish', $primaryContent);
				var $trigger		= $(e.currentTarget);
				var $productOptions	= $trigger.data('productOptions');
				// we only want to run the swapper if it's a new finish
				//if ($finishImage.attr('src') != $productOptions.imagePath) {
				//just in case we have blank images, src will be same, but alt should always be unique as it is the finish
				if ($finishImage.attr('alt') != $productOptions.imageAlt) {
					/*
					var $availableOptions	= $('option', $finishSwitcher);
					var $selectedOption		= $availableOptions.filter('' + $productOptions.target);
					*/
					// switch the image with the new finish
					$finishImage.fadeOut(500, function () {
						$(this)
							.attr('src', $productOptions.imagePath)
							.attr('alt', $productOptions.imageAlt)
							.fadeIn(250);
					});
					// update the prices
					if ($productOptions.salePrice == '') {
						$listPriceHolder.removeClass('on-sale').find('.you-pay').text($productOptions.listPrice);
						$salePriceHolder.removeClass('on-sale').find('.you-pay').text('');
					} else {
						$listPriceHolder.addClass('on-sale').find('.you-pay').text($productOptions.listPrice);
						$salePriceHolder.addClass('on-sale').find('.you-pay').text($productOptions.salePrice);
					}
					$('#model-sku').text($productOptions.sku);
					$('#ShippingOptions').slideUp();
					
					/*
					// set $finishList offset to show selected element and toggle overflow property
					var moveListTo = $finishList.offset().top - $trigger.offset().top;
					toggleList(moveListTo);
					// not a multi-select, so unselect *all* options, then select *only* the option that the user just selected
					$availableOptions.filter(':selected').attr('selected', false);
					$selectedOption.attr('selected', true);
					*/
					doSelectList($trigger);
				}

				e.preventDefault();
			};
			var doSelectList = function($trigger) {
				var $availableOptions	= $('option', $finishSwitcher);
				var $selectedOption		= $availableOptions.filter('' + $trigger.data('productOptions').target);
				// set $finishList offset to show selected element and toggle overflow property
				var moveListTo = $finishList.offset().top - $trigger.offset().top;
				toggleList(moveListTo);
				// not a multi-select, so unselect *all* options, then select *only* the option that the user just selected
				$availableOptions.filter(':selected').attr('selected', false);
				$selectedOption.attr('selected', true);
			};
			// move the list to show the correct option in the box and toggle the visibility of the box
			var toggleList = function (offset) {
				var $wrapper	= $('#finishSwitcherWrapper', $primaryContent);
				var moveListTo	= (typeof offset == 'number') ? offset : 0;
				var overflow	= ($wrapper.css('overflow') == 'hidden') ? 'visible':'hidden';
				$wrapper.css('overflow', overflow);
				$finishList.css('margin-top', moveListTo);
				// IE has trouble with showing the list over the submit button, so just toggle the vis
				if ($.browser.msie && $.browser.version == '7.0' || $.browser.version == '6.0') {
					$finishSubmit.toggle();
				}
			};
			// go go go!
			switchFinishInit();
		}
		
		// launch blackout
		var $additionalImages = $('div.additional-images', $primaryContent);
		var $additionalImagesList = $('ul', $additionalImages);
		if ($additionalImagesList.length) {
			var $additionalImagesTrigger = $('<a class="trigger" href="javascript:void();">+ Other Views</a>')
				.bind('click', function (e) {
					$($('> li > a', $additionalImagesList)[0]).click();
					e.preventDefault();
				});
			$additionalImages.append($additionalImagesTrigger);
			$additionalImagesList.blackout();
		}
	});
})(jQuery);