/// <reference path="jquery-vsdoc.js" />
var litium = {};

litium.site = {};

litium.site.templates = {
	product: (function() {
		var self = {};

		var $defaultProductImage,
			mainProductImageSelector = '#mainproductimage';

		$.fn.equalizeHeights = function(options) {
			// Routine for making all boxes on each row the same height. depends on the equalizeCols jQuery plugin.
			var min = 0,
				max = min + options.numberOfColumns,
				numberOfElements = this.length;

			while (max <= numberOfElements) {
				this.slice(min, max).equalizeCols();
				min = max;
				max += options.numberOfColumns;
			}
		};

		var setMainImage = function(url) {
			// Set the main image to the image specified by the url parameter.
			var $img = $(document.createElement('img')).attr({
				'alt': '',
				'src': url
			});

			$img.one('load', function() {
				$(mainProductImageSelector).html($img);
			})
			.each(function() { // Hack. Ensures the load event of the image will be triggered (for IE7 only?).
				if (this.complete || (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) === 6)) {
					$(this).trigger('load');
				}
			});
		};

		var initImages = function() {
			var $imageLinks = $('.prodright a:has(>img)');

			$defaultProductImage = $(mainProductImageSelector).children('img:first').clone(); //store the default image.
			$imageLinks.click(function(e) {
				e.preventDefault();
				setMainImage($(this).attr('href'));
			}).css('outline', '0');
		};

		var initMoreInfo = function() {
			var $links = $('.prodinfoboxcontainer a.moreinfo'),
				$titlePlaceHolder = $('.prodheadercontainer h1'),
				$introPlaceHolder = $('.prodheadercontainer .Intro'),
				$textPlaceHolder = $('.prodheadercontainer .Text');

			var setVisibility = function($el) {
				if ($el.text().length === 0) {
					$el.hide();
				} else {
					$el.show();
				}
			};

			var showMoreInfo = function($link) {
				var $moreinfo = $link.next('.moreinfo');
				var $title = $moreinfo.children('.title'),
					$intro = $moreinfo.children('.intro'),
					$text = $moreinfo.children('.text'),
					imageUrl = $moreinfo.children('.image').children('a').attr('href');

				$titlePlaceHolder.text($title.text());
				$introPlaceHolder.text($intro.text());
				$textPlaceHolder.html($text.html());

				if (imageUrl.length > 0) {
					setMainImage(imageUrl);
				} else {
					$(mainProductImageSelector).empty().append($defaultProductImage);
				}

				setVisibility($titlePlaceHolder);
				setVisibility($introPlaceHolder);
				setVisibility($textPlaceHolder);
			};

			$links.click(function(e) {
				e.preventDefault();
				showMoreInfo($(this));
			}).css('outline', '0');
		};

		var initModels = function() {
			// Equalize the heights of the boxes containing model images.
			$('.prodinfobox .productmodels > li').equalizeHeights({ 'numberOfColumns': 2 });
			// Init fancybox.
			$('.prodinfobox ul.productmodels li.productmodel > a[href^=#productmodel]').fancybox({
				'autoDimensions': false,
				'centerOnScroll': true,
				'height': 400,
				'overlayColor': '#000',
				'overlayOpacity': '0.8',
				'padding': 10,
				'showNavArrows': false,
				'titlePosition': 'inside',
				'transitionOut': 'none',
				'width': 700
			});
		};

		var initAccessories = function() {
			var tooltipEffect = (jQuery.browser.msie ? 'toggle' : 'fade'); //IE can't handle the 'fade' effect, it'll disable the opacity of the background images...
			var positionText = (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 8);
			// Set equal heights for the items in the accessory list.
			$('div.accessorybox ul.accessories li.accessory').equalizeHeights({ 'numberOfColumns': 2 });
			// Initialize tooltips for the accessory list.
			$('div.accessorybox ul.accessories > li.accessory').each(function() {
				var $this = $(this);
				var $link = $this.children('div');
				var width = $this.outerWidth();
				var offsetX = width - width / 4,
					offsetY = 20,
					tipElementSelector = $link.attr('class');

				if ($(tipElementSelector).length) {
					$this.tooltip({
						'effect': tooltipEffect,
						'offset': [offsetY, -offsetX],
						'position': 'top right',
						'tip': tipElementSelector
					});
				}
			});

			if (positionText) {
				$('div.accessorybox ul.accessories > li.accessory > div > span').each(function() {
					var height = $(this).outerHeight();
					var parentHeight = $(this).parent().outerHeight();
					var vacuum = parentHeight - height;
					var marginTop = Math.floor(vacuum / 2);
					$(this).css('padding-top', marginTop);
				});
			}
		};

		self.init = function() {
			$(document).ready(function() {
				initAccessories();
				initImages();
				initMoreInfo();
				initModels();
			});
		};

		return self;
	})()
};