var album_nav = new DUI.Class({
	
    init: function(element) {
        this.container = $(element);
		this.loading = false;
		this.image_number = 0;
		this.image_loaded = 0;
		this.image_total = this.container.children().length;
		// hide all children by default
		this.container.children().hide();
		this.container.bind('focus', {this_obj: this}, function(event){
			event.data.this_obj.view();
			event.preventDefault();
			return false;
		});
		this.container.bind('blur', {this_obj: this}, function(event){
			event.data.this_obj.unview();
			event.preventDefault();
			return false;
		});
    },

	view: function() {
		// setup the nav
		$('#next').bind('click', {this_obj: this}, function(event){
			event.data.this_obj.next_slide();
			return false;
		});
		$('#prev').bind('click', {this_obj: this}, function(event){
			event.data.this_obj.previous_slide();
			return false;
		});
		// first load of an album
		if (this.image_loaded == 0 && this.image_number == 0) {
			this.load_image();
		}
		$('viewer').height('500');
		$('#viewer_nav').show();
		$('#prev').css('opacity', 0.5);
		$('#next').css('opacity', 1);
		$('#pagination').html(' (' + (this.image_number + 1) + ' of ' + this.image_total + ')');
	},
	
	unview: function() {
		// release the nav
		$('#next').unbind('click');
		$('#prev').unbind('click');
		// reset scroll location
		this.image_number = 0;
		$('#viewer').scrollTo(0, 0);
		$('#viewer_nav').hide();
		$('viewer').height('auto');
	},
	
	next_slide: function() {
		// don't advance past the last image
		if ((this.image_number + 1) == this.image_total) {
			return false;
		}
		// wait for the image to load
		var li = this.container.find('li:eq(' + (this.image_number + 1) + ')');
		if (!li.hasClass('loaded')) { 
			return false; 
		}
		this.image_number++;
		$('#viewer').scrollTo('ul.active li:eq(' + this.image_number + ')', 500, { easing: 'swing', axis: 'x'});
		this.load_image();
		$('#pagination').html(' (' + (this.image_number + 1) + ' of ' + this.image_total + ')');
		// dim the button if that's the last image
		if ((this.image_number + 1) == this.image_total) {
			$('#next').css('opacity', 0.5);
		} else if (this.image_number == 1) {
			$('#prev').css('opacity', 1);
		}
	},
	
	previous_slide: function() {
		// don't advance past the first image
		if (this.image_number == 0) {
			return false;
		}
		this.image_number--;
		$('#viewer').scrollTo('ul.active li:eq(' + this.image_number + ')', 500, { easing: 'swing', axis: 'x'});
		$('#pagination').html(' (' + (this.image_number + 1) + ' of ' + this.image_total + ')');
		// dim the button if that's the first image
		if (this.image_number == 0) {
			$('#prev').css('opacity', 0.5);
		} else if ((this.image_number + 2) == this.image_total) {
			$('#next').css('opacity', 1);
		}
	},
	
	load_image: function() {
		if (this.loading) { return false; }
		this.loading = true;

		var li = this.container.find('li:eq(' + this.image_loaded + ')');
		// don't try to load images twice
		if (li && li.find('img').is(':first-child')) { return false; }
		var url = li.find('a').attr('href');
		var image = new Image();
		image.src = url;
		$(image).bind('load', {parent_obj: li, this_obj: this, image_obj: image}, function(event){
			event.data.parent_obj.empty().append(event.data.image_obj);
			// set the correct width for each li
			event.data.parent_obj.css('width', event.data.image_obj.width + 'px');
			event.data.parent_obj.animate({opacity:'toggle'}, '500', 'swing');
			event.data.parent_obj.addClass('loaded');
			event.data.this_obj.load_image_complete(event.data.parent_object);
		});
		if (this.image_loaded < this.image_total) {
			this.image_loaded++;
		}
	},
	
	load_image_complete: function(li) {
		this.loading = false;
		this.container.width(this.container.width() + $(li).width());
		// always stay 3 steps ahead
		if (this.image_loaded < this.image_number + 3 && this.image_loaded < this.image_total) {
			this.load_image();
		}
	}

});