(function ($) {

	var ViewLarger = {
		built: false,
		
		scrim: null,
		container: null,
		photo_container: null,
		caption_container: null,
		thumbnail_container: null,
		
		photo: null,
		thumbnails: null,

		config: {
			div: '<div>',
			ul: '<ul />',
			li: '<li />',
			img: '<img />',
			scrim_id: 'viewlarger-overlay',
			container_id: 'viewlarger-container',
			photo_container_id: 'viewlarger-image',
			caption_container_id: 'viewlarger-caption',
			thumbnail_container_id: 'viewlarger-thumbnails',
			close_button_id: 'viewlarger-close',
			
			view_larger_button_rel: 'view-larger',
			active_class: 'active',
			
			scroll: 6,
			transition_time: 250,
			
			script: {
				ui: '/pages/script/jquery/jquery.plugin.ui.min.js',
				carousel: '/pages/script/jquery/jquery.plugin.jcarousel.js'
			}
		},

		initialize: function () {
			this.loadDependencies();
			this.attachEvents();
		},
		
		setObjects: function () {
			this.scrim = $('#' + this.config.scrim_id),
			this.container = $('#' + this.config.container_id),
			this.photo_container = $('#' + this.config.photo_container_id),
			this.caption_container = $('#' + this.config.caption_container_id),
			this.thumbnail_container = $('#' + this.config.thumbnail_container_id),
			
			this.photo = $('img', this.photo_container);
			this.thumbnails = $('li', this.thumbnail_container); 	
		},
		
		loadDependencies: function () {
			$.getUniqueScript(this.config.script.ui);
			$.getUniqueScript(this.config.script.carousel);
		},
		
		attachEvents: function () {
			$("a[rel='" + this.config.view_larger_button_rel + "']").click(function (e) { ViewLarger.build(e, this); });
		},
		
		build: function (e, obj) {
			e.preventDefault();
		
			if (!this.built) {
				obj = $(obj);
					
				$.get(obj.attr('href'), function (data) {
					$('body').append(data);
						
					ViewLarger.setObjects();
					
					ViewLarger.scrim.height($(document).height());	
		
					ViewLarger.thumbnail_container.jcarousel({
						vertical: true,
						size: ViewLarger.thumbnails.length,
						scroll: ViewLarger.config.scroll
					});
					
					ViewLarger.container.draggable();
						
					ViewLarger.thumbnails.click(function (e) { ViewLarger.changePhoto(e, this) });
					$('#' + ViewLarger.config.close_button_id).click(function (e) { ViewLarger.close() });

					$.preloadImages($("li a", ViewLarger.thumbnail_container), "href");

					ViewLarger.detectActivePhoto();				
					ViewLarger.container.fadeIn(ViewLarger.config.transition_time);
						
					ViewLarger.built = true;
				});
			} else {
				this.detectActivePhoto();
				this.scrim.show();
				this.container.fadeIn(this.config.transition_time);
			}
		},
		
		close: function () {
			this.scrim.hide();
			this.container.fadeOut(this.config.transition_time);
		},
		
		changePhoto: function (e, obj) {
			if (e != null) {
				e.preventDefault();
			}
		
			obj = $(obj);
			
			if (!obj.hasClass('active')) {
				var obj_link = $('a', obj);
				var obj_img = $('img', obj);
			
				this.thumbnails.removeClass(this.config.active_class);
				this.photo.attr('src', obj_link.attr('href'));
				this.caption_container.text(obj_img.attr('alt'));
				
				obj.addClass(this.config.active_class);
			}
		},
		
		detectActivePhoto: function () {
			if (typeof(ProductHelper) != 'undefined') {
				var product_thumb_img = $('.' + ProductHelper.config.active_class + ' img', ProductHelper.thumbnail_container);
				$('li img', this.thumbnail_container).each(function (i) {
					if ($(this).attr('src') == product_thumb_img.attr('src')) {
						ViewLarger.changePhoto(null, ViewLarger.thumbnails.eq(i));
					}
				});	
			}
		}
	}

	$(document).ready(function () {
		ViewLarger.initialize();
	});

}) (jQuery);