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/v5/script/jquery/jquery.plugin.ui.min.js',
			carousel: '/pages/v5/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.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();
});