var background_images = new function() {
	this.overlay_color = '#6a747c';
	this.overlay_opacity = 0.6;
	this.container_animate_time = 1000; //time it takes the initial screen to fade
	this.image_animate_time = 1000; //time it takes the slides to move
	this.image_min_width = 1000; 
	this.image_min_height = 600;
	this.container_top = 110;
	this.container_bottom = 50;
	this.label_position = { 'top' : '130px', 'right' : '34px' };
	this.position = 0;
	this.z_index = 10;
	this.image_data = [];
	this.images = [];
	this.overlay = null;
	this.container = null;
	this.arrow_left = null;
	this.arrow_right = null;
	this.label = null;
	
	this.setup = function(image_data, position) {
		this.image_data = image_data;
		this.position = position;
		
		this.create();
		
		this.container.fadeIn(this.container_animate_time);
		if (this.arrow_left) this.arrow_left.fadeIn(this.container_animate_time);
		if (this.arrow_right) this.arrow_right.fadeIn(this.container_animate_time);
		this.label.fadeIn(this.container_animate_time);
	};
	
	this.resize = function() {
		for(var i=0; i<this.images.length; i++)
			this.resize_image(i);
	};
	
	this.resize_image = function(index) {
		var img_width = this.image_data[index][1];
		var img_height = this.image_data[index][2];
		
		var display_width = jQuery(window).width();
		var display_height = jQuery(window).height() - this.container_top - this.container_bottom;
		
		if (display_width < this.image_min_width)
			display_width = this.image_min_width;
		if (display_height < this.image_min_height)
			display_height = this.image_min_height;
		
		var width_ratio = display_width / img_width;
		var height_ratio = display_height / img_height;
		
		if (width_ratio > height_ratio) {
			//use width ratio / use full width
			var new_width = display_width;
			var new_height = img_height * width_ratio;
		} else {
			var new_height = display_height;
			var new_width = img_width * height_ratio;
		}
		
		this.images[index].css('width', new_width + "px").css('height', new_height + "px");
	};

	this.move = function(dir) {
		this.position += dir;
		if (this.position < 0)
			this.position = this.images.length - 1;
		else if (this.position >= this.images.length)
			this.position = 0;
			
		this.overlay.animate({'opacity' : 0.9}, this.image_animate_time / 4, function() { 
			if (background_images)
				background_images.overlay.delay(background_images.image_animate_time / 2).animate({'opacity' : background_images.overlay_opacity}, background_images.image_animate_time / 4);
		});
		
		if (this) {
			if (this.images) {
				
				var show_index = this.position;
				var hide_index = this.position - dir;
				if (hide_index < 0)
					hide_index = this.images.length -1;
				else if (hide_index >= this.images.length)
					hide_index = 0;
				
				for(var i=0; i<this.images.length; i++) {
					if (i == show_index) {
						//this is the image we want to show
						var start_pos = "100%";
						if (dir != 1)
							start_pos = "-100%";
						
						this.images[i].css({'left' : start_pos}).show().stop().animate({'left' : "0%"}, this.image_animate_time);
					} else if(i == hide_index) {
						//this is the image we move off
						this.images[i].css({'left' : '0%'}).show().stop().animate({'left' : dir * -100 + "%"}, this.image_animate_time);
					} else {
						this.images[i].hide();	
					}
				}
			}
		}
		
		this.label.fadeOut(this.image_animate_time / 4, function() {
			if (background_images)
				background_images.label.html(unescape(background_images.image_data[background_images.position][3])).delay(background_images.image_animate_time / 2).fadeIn(background_images.image_animate_time / 2);
			else
				alert("Cannot find background_images in move() (#2)");
		});
		

	};

	
	this.create = function() {
		//create the overlay
		this.overlay = jQuery("<div />").css({
			'position' : 'fixed',
			'top' : 0,
			'left' : 0,
			'width' : '100%',
			'height' : '100%',
			'z-index' : background_images.z_index + 1,
			'opacity' : background_images.overlay_opacity,
			'background-color' : background_images.overlay_color
		});
				
		//create the container
		this.container = jQuery("<div />").css({
			'position': 'fixed',
			'top': background_images.container_top + "px",
			'width': '100%',
			'bottom': background_images.container_bottom + "px",
			'left': '0',
			'z-index': background_images.z_index,
			'display': 'none'											   
		});
		
		//load the images
		for(var i=0; i<this.image_data.length; i++) {
			
			var pos = "100%";
			
			if (background_images.position == i)
				pos = "0%";
			
			var new_image = jQuery("<img />").css({
				'position': 'absolute',
				'top': '0',
				'left': pos,
				'width': '100%',
				'height': '100%'				  
			}).attr('src', this.image_data[i][0]);			
			this.images.push(new_image);
			
			//append image to container
			this.container.append(new_image);
		}
		
		
		//create the arrows
		if (this.image_data.length > 1) {
			var arrow_css = {
				'position' : 'fixed',
				'top' : '50%',
				'margin-top' : '-30px',
				'width' : '25px',
				'height' : '45px',
				'z-index' : (background_images.z_index + 200),
				'display' : 'none',
				'cursor' : 'pointer'
			 };
			
			this.arrow_left = jQuery("<div />").css(arrow_css).css({
				'left' : '10px',
				'background-image' : 'url(/images/arrow-left.gif)',
			}).click(function() {
				if (background_images)
					background_images.move(-1);
				else
					alert("Cannot find background_images.move(-1)");
			});
			this.arrow_right = jQuery("<div />").css(arrow_css).css({
				'right' : '10px',
				'background-image' : 'url(/images/arrow-right.gif)',
			}).click(function() {
				if (background_images)
					background_images.move(1);
				else
					alert("Cannot find background_images.move(1)");
			});
		}
		
		//create the label
		this.label = jQuery("<div />").css(this.label_position).css({
			'display' : 'none',
			'position' : 'fixed',
			'text-align' : 'right',
			'color' : 'White',
			'z-index' : (background_images.z_index + 2)
		}).attr('class','background_image_label').html(unescape(this.image_data[this.position][3]));
		
		
		//append everything to the body
		jQuery('body').append(this.overlay).append(this.container).append(this.arrow_left).append(this.arrow_right).append(this.label);
		
		//set window resize handler
		jQuery(window).resize(function() { background_images.resize(); });
		this.resize();
	};

};