var tdType;
(function($) {
	tdType = {
		init : function() {
			// Display the spinner
			$("#body, #filmstrip").css({opacity: 0});
			$("#page").addClass('spinner');
			
			// Set up thumbnails
			$("#body .piece").each(function() {
				var t = $(this);
				var id = t.attr('id');
				
				$('#filmstrip a[href$="' + id + '"]')
				.click(function() {
					if (tdFilmstrip.pieceCarousel.locked || tdFilmstrip.pieceCarousel.animating)
		                return false;
					// Push state
					$.bbq.pushState({piece: id}, 2);
					return false;
				})
				.hover(
					function() {
						$(this).stop().animate({
							borderTopColor: '#58585A',
							borderRightColor: '#58585A',
							borderBottomColor: '#58585A',
							borderLeftColor: '#58585A'
						}, 100);
					},
					function() {
						if ( !$(this).hasClass('active') ) {
							$(this).stop().animate({
								borderTopColor: '#D1D1D3',
								borderRightColor: '#D1D1D3',
								borderBottomColor: '#D1D1D3',
								borderLeftColor: '#D1D1D3'
							}, 250);	
						}
					}
				);
			});
			
			// Create jewellery piece carousel
			$("#body .pieces").jcarousel({
				scroll: 1,
				animation: 750,
				easing: 'easeOutQuart',
				buttonNextHTML: null,
				buttonPrevHTML: null,
				initCallback: function(carousel) {
					tdFilmstrip.pieceCarousel = carousel;
				}
			});

			// Extend jewellery piece carousel
			tdFilmstrip.pieceCarousel.extend({
				scroll: function(i, a) {
					if (this.locked || this.animating)
						return;
					
					// If transition is not animated, trigger it immediately
					if ( a == false ) {
						this.animate(this.pos(i), false);
						return;
					}
					
					// Get distance to new position
					var diff = Math.abs(this.first - $.jcarousel.intval(i));
					
					// Set new animation speed
					var speed = this.options.animation * Math.sqrt(Math.sqrt(diff));
					
					// Animate the scroll
					this.animate(this.pos(i), a, speed);
				},
				animate: function(p, a, speed) {
					if (this.locked || this.animating)
						return;
		
					this.animating = true;
					
					// Added this line; if a speed is specified, use it
					var speed = speed ? speed : this.options.animation;
		
					var self = this;
					var scrolled = function() {
						self.animating = false;
		
						if (p == 0)
							self.list.css(self.lt,	0);
		
						if (self.options.wrap == 'both' || self.options.wrap == 'last' || self.options.size == null || self.last < self.options.size)
							self.startAuto();
		
						self.buttons();
						self.notify('onAfterAnimation');
					};
		
					this.notify('onBeforeAnimation');
		
					// Animate
					if (!speed || a == false) {
						this.list.css(this.lt, p + 'px');
						scrolled();
					} else {
						var o = !this.options.vertical ? {'left': p} : {'top': p};
						this.list.animate(o, speed, this.options.easing, scrolled);
					}
				}
			});

			// Set up jewellery views
			$("#body .view").each(function() {
				var t = $(this);
				var p = t.closest(".piece");
				var src = t.find(".hidden .src").html();
				t.css({
					backgroundImage: "url('" + src + "')"
				});
				
				// If there is more than one view, create view links
				if ( t.siblings(".view").length > 0 ) {
					$('<a />')
						.appendTo(p.find(".viewlinks").show())
						.click(function() {
							// Push state
							$.bbq.pushState({view: t.attr('id')});
							return false;
						})
						.attr({href: '#piece=' + p.attr('id') + '&view=' + t.attr('id')})
						
					// Set first link active
					p.find(".viewlinks a:first").addClass('active');
				}
			});
			
			// Set first view visible
			$("#body .view:not(:first-child)").hide();
			
			// Attach Fancybox to larger image links
			$("a.fancybox").fancybox({
				overlayOpacity: 0.7,
				overlayColor: 'black',
				padding: 0,
				titlePosition: 'inside',
				titleFormat: tdType.fancyboxTitle,
				showCloseButton: false
			});
			
			// Bind an event to window.onhashchange
			$(window).bind('hashchange', function(e, a) {
				var hash = e.getState();
				var piece = hash.piece ? $('a[href$="' + hash.piece + '"]') : $("#filmstrip .thumbs a:first");
				if ( piece.length ) {
					// Update active link
					$("#filmstrip a.active").removeClass('active').css({borderColor: '#D1D1D3'});
					piece.addClass('active').css({borderColor: '#58585A'});
					
					// Display the correct element
					tdFilmstrip.pieceCarousel.scroll( $('#' + hash.piece).attr('jcarouselindex'), a );
				}
				if ( hash.view ) {
					// Update active link
					$('a[href$="' + hash.view + '"]').siblings("a").removeClass('active').end().addClass('active');
					
					// Display the correct element
					$('#' + hash.view).siblings().animate({opacity: 'hide'}, 400).end().animate({opacity: 'show'}, 400);
				}
			});
			
			// Do the rest after everything else has loaded
			$(window).load(tdType.onLoad);
		},
		onLoad : function() {
			// Vertically centre copy
			$("#body .copy").wrapInner('<div />').children("div").vCenter();
			
			// Trigger the correct piece/view on load, without animation
			$(window).trigger('hashchange', false);

			// Remove the spinner
			$("#page").removeClass('spinner');
			$("#body, #filmstrip").animate({opacity: 1}, 200);
		},
		fancyboxTitle : function formatTitle(title, currentArray, currentIndex, currentOpts) {
				 return '<div id="fancybox-caption"><div class="title">' + title + '</div><div class="close"><a href="javascript:;" onclick="jQuery.fancybox.close();">[ close window ]</a></div></div>';
		}
	}
	$(document).ready(tdType.init);
})(jQuery);